タイトルの通りですが、たまにクライアントワークで登場するので備忘録としてメモ。YouTubeなどの動画に限らず、アスペクト比が16:9のワイドになっているインラインフレームに使えるかと思います。コードは以下のとおり。
【HTML】※一部省略
<div class="yt-responsive"> <iframe src="**********" frameborder="0" allowfullscreen></iframe> </div>
【CSS】
.yt-responsive{ position:relative; width:100%; padding-top:56.25%; } .yt-responsive iframe{ position:absolute; top:0; right:0; width:100% !important; height:100% !important; }
過去記事で「インラインのグーグルマップをレスポンシブ対応にする」にも似たような形で紹介しましたが、ここではpadding-topの値を調整することで、アスペクト比に合わせています。4:3などの場合は適宜変更します。
(参考にさせて頂いたサイト)
WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法