酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

Youtube Iframeのレスポンシブ対応

Youtube動画をiframeでサイトに埋め込む時に、最適なサイズに苦慮することってありませんか?そんな時にオススメなのが、iframeの動画をレスポンシブにすることです。CSSを設定するだけで簡単に対応できるので、ぜひ選択肢の一つに!


表示サンプル

こちらが表示サンプルです。ブラウザの幅を調整してもらうとレスポンシブ対応できていることがわかります。

HTML側の設定

html側はyoutubeから取得してきた埋め込み用のiframeをdivで囲みます。

1
2
3
4
5
<div class="youtube-container">
<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>
</div>

CSS側の設定

css側のソースコードはこちら。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// youtube responsive
.youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

まとめ

たったこれだけのソースで、youtubeの幅に悩むことがなくなります。youtube動画を頻繁に使うようなサイトを運営されている方はぜひお試しください!

Special Thanks

YouTube Player API Reference for iframe Embeds - YouTube — Google Developers

おすすめの書籍