YoutubeやVimeoなどの埋め込み動画を簡単にレスポンシブ対応させる方法

どーも＠PNRAです！

ブログを書き始めて、何度かつまずいた箇所だったので、忘備録として抑えておきます。YoutubeやVimeoといった埋め込み動画をレスポンシブさせる方法で、iframeやobject、embedなどといった埋め込みに使える小技です。

YoutubeやVimeoをレスポンシブ対応させるには？

YoutubeやVimeoのような埋め込み動画をレスポンシブ対応させるには、HTMLとCSSを以下のように記述します。HTMLはiframeをdiv要素で囲み、CSSはdivとiframeそれぞれにスタイルを指定します。

HTML
 <div class="video"> <iframe src="//www.youtube.com/embed/'ここに動画コードを入力'" frameborder="0" allowfullscreen></iframe> </div>  <div class="video"> <iframe src="//player.vimeo.com/video/'ここに動画コードを入力'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe> </div>
CSS
/*! 埋め込み動画をレスポンシブ対応させる */ .video { position: relative; height: 0; padding: 0 0 56.25%; overflow: hidden; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
これで実装は完了です。

埋め込み動画ファイルはアスペクト比が1:0.5625のため、div要素の高さをpaddingで取得し、中に横いっぱいのiframeを埋め込むという内容になっています。

レスポンシブ対応させたYoutube

レスポンシブ対応させたVimeo

注意点があるとすれば、動画サイトから引用するとどうしてもwidthやheightの指定が入っているので、レスポンシブに対応させる場合はそれらを抜いてあげる必要があることです。

参考にさせていただいたのはこちらのサイト

参照：NxWorld：YouTubeやVimeoなどの埋め込み動画をレスポンシブ対応させる方法

　　　Web Designer Wall：CSS: Elastic Videos

さらに埋め込み動画をカスタマイズしたいという方はこちらもどうぞ

押さえておきたい！youtube動画を埋め込む際のTips集

Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)