Bootstrap Ver 5.0.1 でYoutube動画をレスポンシブに埋め込み表示する


世界で最も人気のあるフレームワークBootstrapは、スマートフォンなどのモバイル端末にも対応し、 レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。
Introduction - Bootstrap 5.0.1 - 英語 ≫

YouTube動画のアスペクト比 ≫｜YouTube動画のアスペクト比別レスポンシブな埋め込み方法 ≫｜Bootstrap5 beta1 YouTube動画アスペクトレシオ別埋め込み表示・デモ ≫

 YouTube動画のアスペクト比

Bootstrap5は、YouTube動画のアスペクト比について、つぎのとおりカスタマイズ可能です。
Bootstrap 5 Embeds - 英語 ≫｜ 比率ヘルパー - 比率のカスタマイズ（Custom ratios）

デフォルトのアスペクト比（Aspect ratios）

アスペクト比 名　称* 主流の解像度
（横×縦 px）		用　途
21：9 ウルトラワイド 2560×1080 映画で多く制作される「シネスコサイズ」とほぼ同じ縦横比で、フルHDなど16:9の画面に比べて約133％横に長いサイズ。
16：9 ワイド 1280×720 地上波デジタル放送における標準的なアスペクト比であり、YouTubeを中心とした多くの動画配信プラットフォームでも主流なアスペクト比。
4：3 スタンダード 640×480 地上アナログ放送が終了する2011年7月24日まで主流だったアスペクト比で、このためスタンダードという呼称はあるが、現在では一部のDVDメディアなどを除いてこのアスペクト比で動画が制作されることは少なくなった。
1：1 スクエア 最小: 600x500
最大: 1936x1936		 スマートフォンの普及につれて徐々に増え始めたアスペクト比で、一般的にはインスタグラム上で配信する動画が1:1のアスペクト比に対応。

21:9 ウルトラワイド16:9 ワイド4:3 スタンダード1:1 スクエア


比率ヘルパー、 比率のカスタマイズ（Custom ratios）

・アスペクト比2x1の例（width=300px）
  たとえば、2x1のアスペクト比を作成するには、.ratio に --bs-aspect-ratio: 50% を設定します。


<!-- Custom ratios HTML -->
<div class="ratio" style="--bs-aspect-ratio: 50%; width: 300px;">
  <iframe src="https://www.youtube.com/embed/AoUxjQOQW7A"></iframe>
</div>



 YouTube動画のアスペクト比別レスポンシブな埋め込み方法

YouTube動画を埋め込には、Bootstrap5のCDN, パッケージマネージャ, ダウンロードなど様々な方法でプロジェクトを始めることができます。 このページでは、ダウンロードんどが不要なCDNを利用する方法で実現します。
Bootstrap v5.0.0-beta1 ダウンロード - 日本語 2021.2.9 現在 ≫｜ Bootstrap 5.0.1 Download - 英語 ≫

1. CSSファイル

つぎのCSS<link> を <head>内側に他のスタイルシートよりも先に置きます。



<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

2. JSファイル

いくつかのコンポーネントで jQuery, Popper.js などの JavaScript プラグインが必要です。
JavaScript を必要とするコンポーネントは、つぎのとおりです。

  1. Alerts for dismissing
  2. Buttons for toggling states and checkbox/radio functionality
  3. Carousel for all slide behaviors, controls, and indicators
  4. Collapse for toggling visibility of content
  5. Dropdowns for displaying and positioning (also requires Popper.js)
  6. Modals for displaying, positioning, and scroll behavior
  7. Navbar for extending our Collapse plugin to implement responsive behavior
  8. Tooltips and popovers for displaying and positioning (also requires Popper.js)
  9. Scrollspy for scroll behavior and navigation updates

上記5,8のツールチップ（Tooltips）を使うには「popper.min.js - マウスを載せたときなどに表示されるポップオーバーライブラリー」が必要です。

Bootstrap 5のJabascriptのインクルードには、つぎの２つの方法があります。

ケース１ - ツールチップ（Tooltips）を使用しない場合
    </ body>の直前に置きます。


<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

ケース２ - ツールチップ（Tooltips）を使用する場合 - マウスを載せたときなどに表示されるポップオーバーライブラリー使用
    </ body>の直前に置きます。


<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

3. Bootstra5の基本テンプレートHTML

レスポンシブなデザインと仕様を考慮し、HTML5で viewport を使った次のようなコードを使用します。
なお、表示デバイスに対するレスポンシブな対応CSSのカスタマイズ方法については、別項-5項で述べます。 


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>





4. YouTube動画埋め込みEmbeds(エンベッド)コード


Embeds(エンベッド)とは、任意のデバイスで比例する比率で親要素（DIVタグなど）の幅に基づいてレスポンシブなビデオやスライドショーの埋め込みをできます。
YouTube動画のエンベッドコードの使い方の例をアスペクト比別に示します。

 Embeds(エンベッド) - 英語 ≫







<!-- 21:9 aspect ratio -->
<div class="ratio ratio-21x9">
  <iframe src="https://www.youtube.com/embed/sr--GVIoluU"></iframe>
</div>








<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/sr--GVIoluU"></iframe>
</div>








<!-- 4:3 aspect ratio -->
<div class="ratio ratio-4x3">
  <iframe src="https://www.youtube.com/embed/sr--GVIoluU"></iframe>
</div>








<!-- 1:1 aspect ratio -->
<div class="ratio ratio-1x1">
  <iframe src="https://www.youtube.com/embed/sr--GVIoluU"></iframe>
</div>







5. レスポンシブなWebデザイン対応テンプレートCSS



CSS「メディアクエリ」(@media)を使い、画面サイズによって適用されるCSSの指示内容を切り替えできることができます。

これにより、PCとスマホで異なる表示やレイアウトができるようになります。

メディアクエリを使った基本的なレスポンシブなWebデザイン対応CSSの書き方はつぎのとおりです。







/* ウィンドウ幅が767px以上の場合に適用 デスクトップ用 */
@media screen and (min-width: 767px) { 

ここにデスクトップ用CSSを記述 

}

/* 959px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 959px) {

ここにタブレット用CSSを記述 
 
}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) { 	

ここにスマホ用CSSを記述 

}







6. レスポンシブなWebデザインこれまでのHTMLまとめ



これまでのサンプルコードをまとめ、つぎのとおりサンプルHTMLを作成します。









新しいページで、Bootstrap 5.0.1 まとめサンプルHTML（全体）のレスポンシブ対応デモを見る ≫

   （注）デモはBootstrap 5.0.1で作成しています






  
  



<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 5.0.1 レスポンシブなYouTube動画埋め込み - アスペクトレシオ別</title>

<!-- Bootstrap 5.0.1 CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<style>
/* ウィンドウ幅が767px以上の場合に適用 デスクトップ用 */
@media screen and (min-width: 767px) { */
 body{
   padding-left:10px;
  }

 #yt21x9{
   width:1000px;
    }
 #yt16x9{
   width:900px;

    }
 #yt4x3{
   width:640px;

    }
 #yt1x1{
   width:600px;
    }
 h3{
   color:naby;
  }
 
/*}
*/

/* 959px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 959px) {

 /*ここにタブレット用CSSを記述*/
 
}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) { 	


/* youtubeサイズ指定 */
  #yt21x9{
   width:100%; display:none;
    }
 #yt16x9{
   width:100%; display:none;
    }
 #yt4x3{
   width:100%;  display:none;
    }
 #yt1x1{
   width:100%;
    }
 #yt16x9-2{
   width:100%;  display:none;
    }

 h3{
   color:blue; 
  }

}
</style>

</head>
<body>
<center><h1>Bootstrap 5.0.1 レスポンシブなYouTube動画埋め込みサンプル・デモ<br> - アスペクトレシオ別 -</h1></center>
<br>
<p>
<a href="#emd1">1. アスペクトレシオ 21:9（ウルトラワイド）</a>｜<a href="#emd2">2. アスペクトレシオ 16:9（ワイド）</a>｜<a href="#emd3">3. アスペクトレシオ 4:3（スタンダード）</a>
<br><a href="#emd4">4. アスペクトレシオ 1:1（スクエア）</a>｜<a href="#emd5">5. アスペクトレシオ 16:9（ワイド）width=無指定 </a>｜<a href="#emd6">6. アスペクトレシオ カスタマイズ - 4:3（640x480）から 2:1（640x320）に変更 </a>
    <!-- ここにYouTubeコンテンツ -->
</p>
<h3 id=emd1>1. アスペクトレシオ 21:9（ウルトラワイド）width=1000px (1000X429)</h3>
<div class="ratio ratio-21x9" id="yt21x9">
  <iframe src="https://www.youtube.com/embed/JH_BAwSFKwM"></iframe>
</div>
<br>
<!-- 16:9 aspect ratio -->
<h3 id=emd2>2. アスペクトレシオ 16:9（ワイド）width=900px (900X509)</h3>
<div class="ratio ratio-16x9" id="yt16x9">
  <iframe src="https://www.youtube.com/embed/zMcTRiAq2Y4"></iframe>
</div>
<br>
<!-- 4:3 aspect ratio -->
<h3 id=emd3>3. アスペクトレシオ 4:3（スタンダード）width=640px (640X480)</h3>
<div class="ratio ratio-4x3" id="yt4x3">
  <iframe src="https://www.youtube.com/embed/HL4IZfsJ6_4"></iframe>
</div>
<br>
<!-- 1:1 aspect ratio -->
<h3 id=emd4>4. アスペクトレシオ 1:1（スクエア）width=600px (600X600)</h3>
<div class="ratio ratio-1x1" id="yt1x1">
  <iframe src="https://www.youtube.com/embed/HIB8RBhPkBA"></iframe>
</div>
<br>
<h3 id=emd5>5. アスペクトレシオ 16:9（ワイド）width=無指定 (1000X563)</h3>
<div class="ratio ratio-16x9" id="yt16x9-2">
<iframe src="https://www.youtube.com/embed/bEBNISQqhtk" allowfullscreen></iframe>
</div>
<br>
<hr>
<h3 id=emd6>6. アスペクトレシオ カスタマイズ - 4:3（640x480）から 2:1（640x320）に変更</h3>

<div class="ratio" style="--bs-aspect-ratio: 50%; width: 640px;">
  <iframe src="https://www.youtube.com/embed/AoUxjQOQW7A"></iframe>
</div>
<hr>
<span> (c)urbanqee.com 2021.5.16</span>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>


  

  



<style>
/* ウィンドウ幅が767px以上の場合に適用 デスクトップ用 */
@media screen and (min-width: 767px) { 
 body{
   padding-left:10px;
  }

 #yt21x9{
   width:1000px;
    }
 #yt16x9{
   width:900px;

    }
 #yt4x3{
   width:640px;

    }
 #yt1x1{
   width:600px;
    }
 h3{
   color:naby;
  }
}

/* 959px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 959px) {

 /*ここにタブレット用CSSを記述*/
 
}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) { 	


/* youtubeサイズ指定 */
  #yt21x9{
   width:100%; display:none;
    }
 #yt16x9{
   width:100%; display:none;
    }
 #yt4x3{
   width:100%;  display:none;
    }
 #yt1x1{
   width:100%;
    }
 #yt16x9-2{
   width:100%;  display:none;
    }

 h3{
   color:blue; 
  }
}
</style>

   









■ Bootstrap 5.0.1 YouTube動画アスペクトレシオ別埋め込み表示 - デモ





1. アスペクトレシオ 21:9（ウルトラワイド）｜ 2. アスペクトレシオ 16:9（ワイド）｜ 3. アスペクトレシオ 4:3（スタンダード）

4. アスペクトレシオ 1:1（スクエア）｜ 5. アスペクトレシオ 16:9（ワイド）｜ 6. アスペクトレシオ カスタマイズ - 4:3（640x480）から 2:1（640x320）に変更



    

1. アスペクトレシオ 21:9（ウルトラワイド）width=1000px (1000X429)



  







2. アスペクトレシオ 16:9（ワイド）width=900px (900X509)




	







3. アスペクトレシオ 4:3（スタンダード）width=640px (640X480)



  







4. アスペクトレシオ 1:1（スクエア）width=600px (600X600)



  






5. アスペクトレシオ 16:9（スクエア）width=無指定 (1000X563)










6. アスペクトレシオ カスタマイズ - 4:3（640x480）から 2:1（640x320）に変更



  





YouTube動画のアスペクト比 ≫｜YouTube動画のアスペクト比別レスポンシブな埋め込み方法 ≫｜Bootstrap5 beta1 YouTube動画アスペクトレシオ別埋め込み表示一覧 ≫





 

             

             

             

             

             










 
 HOME
 
 

  最終更新日：2021.5.16


メール：  



掲示板