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


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

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

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

Bootstrap4は、YouTube動画のアスペクト比について、つぎのとおりカスタマイズ可能です。
Embeds(エンベッド) - 日本語 ≫

アスペクト比 名 称 主流の解像度
(横×縦 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のアスペクト比に対応。

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


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

YouTube動画を埋め込には、Bootstrap4のCDN, パッケージマネージャ, ダウンロードなど様々な方法でプロジェクトを始めることができます。 このページでは、ダウンロードんどが不要なCDNを利用する方法で実現します。
はじめに - Bootstrap 4.3 - 日本語リファレンス ≫

1. CSSファイル

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



<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">

2. JSファイル

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



<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>


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

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


<!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>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- ここにYouTubeコンテンツ -->

    <!-- 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>

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

Embeds(エンベッド)とは、任意のデバイスで比例する比率で親要素(DIVタグなど)の幅に基づいてレスポンシブなビデオやスライドショーの埋め込みをできます。 YouTube動画のエンベッドコードの使い方の例をアスペクト比別に示します。
動画のサイズは、親要素(DIVタグ)で、横サイス(width)のみを指定します。縦サイズ(height)は、その動画のアスペクト比により自動調整されます。 横サイス(width)を指定しないと、ページのbodyの横サイズになります。
Embeds(エンベッド) - 日本語 ≫


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

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

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

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

どの埋め込みEmbeds(エンベッド)コードを使用するかは、動画のアスペクト比別を見分ける必要があります。
現在、YouTube動画のアスペクト比別は16:9比別が、多くを占めています。
動画のアスペクト比別を見分ける方法はつぎのとおりりです。