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


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

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

 YouTube動画のアスペクト比

Bootstrap5は、YouTube動画のアスペクト比について、つぎのとおりカスタマイズ可能です。
Bootstrap5 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% を設定します。

<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 beta2 Download - 英語 ≫

1. CSSファイル

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



<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

2. JSファイル

いくつかのコンポーネントで jQuery, Popper.js などの JavaScript プラグインが必要です。
<script> を </ body>の直前につぎの順番のとおりに置きます。


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 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.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>私は仕事が大好きです。</title>
  </head>
  <body>
    <h1>私は仕事が大好きです。</h1>

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" 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を作成します。



新しいページで、Bootstrap5 beta1 まとめサンプルHTML(全体)のレスポンシブ対応デモを見る ≫
   (注)デモはBootstrap5 beta3で作成しています


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

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

<!-- Bootstrap5 beter2 CSS beta1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<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>Bootstrap5 beta2 レスポンシブな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>
    <!-- ここに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>

<span>(c)urbanqee.com 2021.2.18 beta2</span>
  </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>


■ Bootstrap5 beta1 YouTube動画アスペクトレシオ別埋め込み表示・デモ


1. アスペクトレシオ 21:9(ウルトラワイド)2. アスペクトレシオ 16:9(ワイド)3. アスペクトレシオ 4:3(スタンダード)
4. アスペクトレシオ 1:1(スクエア)5. アスペクトレシオ 16:9(ワイド)

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)



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


HOME
 最終更新日:2021.2.22(初版)
メール:  掲示板