WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法

レスポンシブWebで作られたサイトでは自分で作成した画像などはCSSで対応させますが、Youtubeやvimeoなどの外部サービスを埋め込む際にレスポンシブ対応させる簡単な方法をまとめます。Wordpressの投稿などでも簡単に設定できるのでとても便利です。

Youtubeの埋め込みサンプル

Vimeoの埋め込みサンプル

PCではブラウザウィンドウを小さくしたりすると自動的に動画サイズもコンテンツエリア内で縮小されていくと思います。タブレットPCやiPhoneなどのスマートフォンでも画面内に収まっています。

一見難しそうな外部サイトのレスポンシブ対応ですが、CSSのみで簡単に行うことができるので設定方法を見ていきます。

HTML側では投稿時にclassを追加

YoutubeやVimeoから取得したコードを記述した部分をdiv="move"で囲みます。

<div class="move">
/*動画の埋め込みコード*/
</div>

/*上のYoutubeの場合*/
<div class="move">
<iframe width="547" height="308" src="//www.youtube.com/embed/-bCKCl3Gj1M?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

動画埋め込み時のサイズは？

Youtubeやvimeoでは埋め込み時に埋め込みサイズを決める形になりますが、これは自分のサイト内で表示したいサイズをpxで指定してしまって大丈夫です。まずはPC上での見た目を指定して、その後CSSでレスポンシブ対応するという形になります。

WordPressではプラグイン「AddQuicktag」に登録すると便利

WordPressで毎回記述するのは面倒な場合は、タグを登録してボタンで呼び出せる「AddQuicktag」などを使用すると便利でしょう。

「AddQuicktag」については以前のWordPressの連載時にまとめていますのでこちらもご覧ください。

• 記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ｜WordPressでビジネスサイトをつくろう【第16回】

CSSで行う設定

Youtubeやvimeoでは動画の読み込みにiframe要素を使用する形になります。そこでCSSでiframe要素の幅と高さを100%にして、位置をposition:absoluteにしている形になります。

.move{
position:relative;
width:100%;
padding-top:56.25%;
}
.move iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

これだけで読み込み時にサイズ指定した動画をレスポンシブ対応にすることができます。※余白などが必要な場合は任意で追加してください。

CSSだけで簡単に動画の埋め込みをレスポンシブ対応できるのでオススメです。

今回のサンプルの参考にした書籍

今回の動画の埋め込みは2つのブログ（HTML5でサイトをつくろう、WEBデザインクリップ）のリニューアル時に参考にした書籍に載っていたサンプルを使用しました。

現場でかならず使われているWordPressデザインのメソッド

自分もWordPressの書籍を書かせて頂いていますが、時間が立っているので最近はどんな記述があるかなと今回のブログリニューアルでは複数の書籍を参考にさせていただきました。

この書籍は自分も書かせていただいた「現場でかならず使われている jQueryデザインのメソッド」と同じシリーズの本です。

このシリーズはTIP集的になっていて実装したい内容がまとまっているので、目次を見ていたら「レスポンシブ対応した動画の埋め込み」とまさにドンピシャでそのまま使わせていただきました。

ネットでも探せばありますが、書籍としてまとまっている方が自分が探しやすくて定期的に本で勉強しています。

現場でかならず使われているWordPressデザインのメソッド

ブログリニューアル時に使用したWordPress関連の書籍などについては今度まとめたいとおもいます。