アマゾンプライムデー開催中!6/22まで 

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>

【開催中】お得情報

  • このエントリーをはてなブックマークに追加