レスポンシブでYouTubeの埋め込み

2021.04.08（更新日：2021.04.08）

Youtubeをレスポンシブで埋め込む場合のメモ。
考え方としてはGoogle Mapをレスポンシブで埋め込むのと同様の方法になる。
何を今更のないようだけど備忘録。

この記事は１年以上経過しています。内容的に古い場合があります。

レスポンシブでの埋め込み

まずは該当のYouTube動画から「動画の埋め込みコード」を取得しておく。

動画下のタイトル右側にある「共有」をクリック
モーダルウィンドウ内の「埋め込む」を選択
表示された「埋め込み」の「iframe」コードをコピー

<!-- HTML -->
<div class="youtube-wrap">
  <!-- ここに埋め込みコードを入れる -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/youtubeID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
</div>

ポイントは埋め込みコードを入れるボックスを作り、埋め込みコードを内包すること。
上の例の場合だと「youtuve-wrap」がそれ。

/* CSS */
.youtube-wrap {
　　position: relative;
　　width: 100%;
　　padding-top: 56.25%
}
.youtube-wrap iframe {
　　position: absolute;
　　top: 0;
　　right: 0;
　　width: 100%;
　　height: 100%;
}

アスペクト比（縦横の比率。16:9）を使って表示スペースを作り、拡大縮小しても差し障りのない表示が可能になる。