YouTube iframeのレスポンシブ対応


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


🍮 表示サンプル

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


🗻 HTML側の設定

html側はYouTubeから取得してきた埋め込み用の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

🦃 個人開発者とビデオチャットしませんか?

平日・週末の夜に個人開発や新規サービス作りについてSkypeやHangout、Zoomで情報交換しませんか?
新しいサービスのアイデアや収益化、集客の部分を考えたり、NoCode や便利なツールを使った開発の効率化等について情報交換ができると嬉しいです。
エンジニアさんだけでなく、一緒に何かを作りたいとか、全然別の職種の方でどういう風にサービス作ればいいかの相談とかも相談のります!

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍