タイトルの通りですが、たまにクライアントワークで登場するので備忘録としてメモ。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対応にさせる方法
