youtubeの埋め込み

youtubeの埋め込みコードを適切な比率で埋め込む方法。

youtubeから埋め込みコードを取得

動画のページを表示、「共有」をクリックして、開いたダイアログの「埋め込み」をクリック

右下のコピーをクリックして埋め込みコードをコピーする。

HTMLを記述

<div class="iframe-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pjnKuhcfB6U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

埋め込みコードを<div class=”iframe-wrapper”>～</div>で囲む。

CSSを記述

.iframe-wrapper{
　position: relative;
　padding-bottom: 56.25%;
　height: 0;
　overflow: hidden;
}
.iframe-wrapper iframe {
　position: absolute;
　top: 0;
　left: 0;
　width: 100%;
　height: 100%;
}

動画の比率は16：9なのでその比率になるようにpadding-bottomの数値を設定する。
9÷16＝56.25%

親要素は幅100%なので、padding-bottom:56.28%; と設定する。
子要素を絶対位置で指定するため position: relative; を設定。
高さは0とする。

子要素iframeは絶対位置でtop, leftを0、幅高さを100%と設定する。