サイトやページに埋め込むYouTube動画をレスポンシブ対応させる方法
サイトやページの制作時に、YouTube動画を埋め込むことが多々あります。今回は、YouTube動画をPCでもタブレットでもスマホでもきれいに表示出来るように、つまりレスポンシブ対応するためのCSSを紹介します。
実装方法
HTML
まずはYouTubeから、動画の埋め込み用ソースを取得して、下記のように<div class="movie">で囲ってあげます。
<div class="movie">
<iframe width="560" height="315" src="https://www.youtube.com/embed/26lQma5FW2E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
CSS
CSSは次のように記述します。
.movie {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
デモ
See the Pen
jROPyz by keitasakurai (@mdesignyokohama)
on CodePen.