YouTube iframeのレスポンシブ対応


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


🏈 表示サンプル

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


🍄 HTML側の設定

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

<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側のソースコードはこちら。

// 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動画を頻繁に使うようなサイトを運営されている方はぜひお試しください!

🐠 参考リンク

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

📚 おすすめの書籍