Youtubeの埋め込み動画をレスポンシブにする

Youtubeの動画を埋め込んでスマホで見た時にサイズ最適化されない問題を解決します。

イメージデモ

See the Pen
Responsive Youtube Embed by kura (@kuranopen)
on CodePen.

スクロールして動作を確認してみてください。

HTML

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

• 埋め込みタグを.youtube-videoで囲みます

CSS

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

ページ内CSS

下記のCSSと上記のHTMLをYoutubeと一緒に使用すればYoutubeの埋め込み動画がレスポンシブになります。

<style>.youtube-video{position:relative;max-width:100%;padding-top:56.25%}.youtube-video iframe{position:absolute;top:0;right:0;width:100%;height:100%}</style>

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選