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

つぎの計算を行い、その値（r）によりアスペクト比別を判別します。
　　 r=vw÷vh (vw54行目付近の値 853、vh55行目付近の値 480）

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

CSS「メディアクエリ」(@media)を使い、画面サイズによって適用されるCSSの指示内容を切り替えできることができます。
これにより、PCとスマホで異なる表示やレイアウトができるようになります。
メディアクエリを使った基本的なレスポンシブなWebデザイン対応CSSの書き方はつぎのとおりです。

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

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

まとめサンプルHTML（全体）
レスポンシブ対応CSS


<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Bootstrap4レスポンシブなYouTube動画埋め込み - アスペクトレシオ別</title>

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

 /* youtubeサイズ指定 */
 #yt21x9{
   width:1000px;
    }
 #yt16x9{
   width:900px;
    }
 #yt4x3{
   width:640px;
    }
 #yt1x1{
   width:600px;
    }
}

/* 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>
    <h1>Bootstrap4レスポンシブなYouTube動画埋め込みサンプル<br> - アスペクトレシオ別</h1>
<br>
    <!-- ここにYouTubeコンテンツ -->
<h3>1. アスペクトレシオ 21:9（ウルトラワイド）width=1000px (1000X429)</h3>
<div class="embed-responsive embed-responsive-21by9" id="yt21x9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/JH_BAwSFKwM"></iframe>
</div>
<br>
<!-- 16:9 aspect ratio -->
<h3>2. アスペクトレシオ 16:9（ワイド）width=900px (900X509)</h3>
<div class="embed-responsive embed-responsive-16by9" id="yt16x9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zMcTRiAq2Y4"></iframe>
</div>
<br>
<!-- 4:3 aspect ratio -->
<h3>3. アスペクトレシオ 4:3（スタンダード）width=640px (640X480)</h3>
<div class="embed-responsive embed-responsive-4by3" id="yt4x3">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/HL4IZfsJ6_4"></iframe>
</div>
<br>
<!-- 1:1 aspect ratio -->
<h3>4. アスペクトレシオ 1:1（スクエア）width=600px (600X600)</h3>
<div class="embed-responsive embed-responsive-1by1" id="yt1x1">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/HIB8RBhPkBA"></iframe>
</div>
<br>
<h3>5. アスペクトレシオ 16:9（ワイド）width=無指定 (1339X753)</h3>
<div class="embed-responsive embed-responsive-16by9" id="yt16x9-2">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/bEBNISQqhtk" allowfullscreen></iframe>
</div>
<hr>
<img src="../img/bootstrap4-yt-sample-qr.png">
<hr>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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;
    }
 #yt16x9-2{
   width:50%;
    }
}

/* 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;
    }
}
</style>

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

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

YouTube動画のBootstrap4が扱うアスペクト比

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

1. CSSファイル

2. JSファイル

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

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

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

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

■ YouTube動画アスペクトレシオ別埋め込み表示一覧

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)