CSS 埋め込みYoutube動画のレスポンシブ対応

2020-03-23

Youtubeの動画をサイト内に埋め込みたい時、Youtube内で取得したコードを貼り付けただけだと、レスポンシブには対応できていません。そこで、CSSで下記のように調整することで、レスポンシブ対応することができます。

<div class="movie">
/* -- ここにYoutube動画のソースコード -- */
</div>

/* -- ここにYoutube動画のソースコード -- */

</div>

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

.movie {

position: relative;

width: 100%;

padding-top: 56.25%;

}

.movie iframe {

position: absolute;

top: 0;

right: 0;

width: 100% !important;

height: 100% !important;

}

なお、ここで出てきている{ padding-top: 56.25% } は16:9の比率からきています。
動画の比率によって、調整してみてください。