以前「YouTube動画の表示サイズをレスポンシブにする方法。」でJavaScriptを使ってYouTubeなどの動画をレスポンシブに対応させる方法をご紹介しました。
今回はiframeで出力された動画をCSSを使って簡単にレスポンシブ化する方法をご紹介します。
ステップ１：動画を用意する
上記の記事を参考に、YouTubeからiframeで埋め込みコードを取得します。今回は参考に下記の動画を使います。
レスポンシブ化する動画
<iframe width="560" height="315" src="http://www.youtube.com/embed/k7sbl0p9kxw" frameborder="0" allowfullscreen></iframe>
ステップ２：クラス名を指定する
先ほどのiframeに任意のクラス名を指定します。今回はyoutubeというクラスを付けましょう。
<div class="youtube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/k7sbl0p9kxw" frameborder="0" allowfullscreen></iframe>
</div>
ステップ３：CSSで調整する
あとは下記のCSSで先ほど指定したクラス名のスタイルを調整することで、画面幅に合わせてYouTube動画のサイズも可変するようになります。
.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
当たり前ですが、指定するクラス名を変えた場合はCSSの「.youtube」も同じクラス名にしてくださいね。
