YouTubeなどのiframeで埋め込む動画をレスポンシブに対応させる方法を紹介します。
以前、「たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法」という非常に簡単な方法を紹介しましたが、あくまで簡易的な対応方法なので、横幅が小さくなるにつれて高さが間延びしてしまいます。
今回は、高さもしっかりとレスポンシブに対応する方法を紹介したいと思います。
ステップ1. 埋め込みコードにクラスを付与する
まずは、埋め込みコードにクラスを付与してあげます。
通常は、以下のような埋め込みコードになっているかと思います。
<iframe width="560" height="315" src="//www.youtube.com/embed/vyGiIZkPjiI" frameborder="0" allowfullscreen></iframe>
これをdiv要素で包括し、クラスを付与します。
<div class="rwd_embed"><iframe width="560" height="315" src="//www.youtube.com/embed/vyGiIZkPjiI" frameborder="0" allowfullscreen></iframe></div>
これで準備完了です。あとはCSSでレスポンシブに対応させます。
ステップ2. CSSを追加する
追加したクラス「rwd_embed」に対して、以下のようなCSSを追加します。
.rwd_embed {
position: relative;
margin: 20px 0;
padding-bottom: 56.25%;
padding-top: 30px;
overflow: hidden;
max-width: 100%;
height: auto;
}
.rwd_embed iframe, .rwd_embed object, .rwd_embed embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
これで、埋め込み動画がレスポンシブ対応になります。
実際に埋め込んでみた動画が以下になります。
ブラウザの幅を縮めて確認してみてください。画面幅に合わせて、縦横比を保った状態でサイズが小さくなってくれますね。
ステップ3. クラスを付与するためのクイックタグを追加する
これは必須ではありませんが、WordPressを使っているのであれば、クラスを付与するためのクイックタグを追加しておくと便利です。
利用しているテーマのfunctions.phpに以下のコードを追加すると、投稿エディタのテキストモードに「RWD」というボタンが追加されます。
function add_my_quicktag() {
?>
<script type="text/javascript">
QTags.addButton('rwd_embed', 'RWD', '<div class="rwd_embed">', '</div>');
</script>
<style>
#qt_content_rwd_embed{
background:#fed;
}
</style>
<?php
}
add_action('admin_print_footer_scripts', 'add_my_quicktag');
埋め込みコードを選択した状態でRWDボタンを押すと、埋め込みコードが<div class=”rwd_embed”>～</div>で包括されます。毎回クラスを手打ちするのは面倒なので、クイックタグを追加しておくと効率化できますね。
クイックタグの詳細については、「WordPressの投稿エディタ(テキストモード)にプラグインなしでクイックタグを追加する方法」をご参照ください。
あとがき
最近は動画コンテンツを掲載しているサイトが増えてきたように思います。サイト全体はレスポンシブになっているのに、埋め込み動画はレスポンシブ対応になっておらず、横に伸びていたり、はみ出た部分が切れていることがあります。
サイトをレスポンシブにしているのであれば、埋め込んだ動画もしっかりとレスポンシブにしておきたいですね。