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

🖥 VULTRおすすめ

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

📚 おすすめの書籍