サイトやページに埋め込むYouTube動画をレスポンシブ対応させる方法

FRONTEND

2019.03.31

サイトやページの制作時に、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.