HTML

YouTube 動画の埋め込みをレスポンシブ対応する方法

YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。

動画の埋め込みをレスポンシブ対応する方法

まずは YouTube からコピーした「動画の埋め込みのコード(iframe)」をブロック要素(<div class="youtube">〜</div>)で囲みます。

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

次に、囲った「ブロック要素」と「動画の埋め込みコード」に CSS を指定します。

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

囲ったブロック要素(<div class="youtube">〜)に横幅と高さを指定して、空っぽの箱を作ります。
YouTube 動画のアスペクト比はデフォルトで 16:9 なので、横幅は width: 100%; 高さは padding-top: 56.25%; を指定。
padding の特性として、pading-top 100% は、width の100% と同じ値になるため、比率を保って拡大縮小するような場合は、padingで高さの指定を行います。

作った空っぽの箱に iframe を入れるわけですが、そのまま入れると padding せいで iframe が箱の外に弾かれるので、position: absolute; を指定して箱の内側に iframe を収めます。
指定がうまくゆけば下の動画のようにレスポンシブ対応した動画埋め込みが完成します。

まとめ

YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介しました。