Youtube埋め込みの高さ問題解決!Padding-bottom:56.25%

Youtube埋め込みの高さ問題解決!Padding-bottom:56.25%

板川 恵司朗です。

Youtubeの埋め込みをするときって、皆さんはどうやって高さ指定をしてますか?

Youtubeを横幅100%で表示した場合、Youtube側で任意の高さに表示されますし、heightで高さを指定した場合、スマホで閲覧した場合、縦長の動画になったりとなかなか苦労した覚えがあります。

最終的には、JavaScriptで横幅を取得して、それに対しての16:9になるように高さをJavaScriptで設定していたような気がします。

しかし今回、そのYoutbeの埋め込み高さ問題を解決する、コロンブスの卵的な方法がありましたのでご紹介します。

悪い例

先述したように、heightを固定した場合の悪い例です。
この場合、スマホで見た際に残念なことになります。

padding-bottom:56.25%;を使った例

謎にpadding-bottomで%を指定する場合、横幅の100%を基準に算出するようです。そのため、16:9の比率を実現するにはpadding-bottomを56.25%に設定すると簡単に16:9のボックスを作ることができるのです。

.youtube__wrapper{
  position:relative;
  padding-bottom:56.25%;
  width:100%;
  height: 0;
  
  iframe{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
  }
}

Youtubeの埋め込みで苦戦されている方はぜひ試してみてください。

参考サイト: https://dev.to/cydstumpel/4-css-tricks-that-will-get-you-dirty-looks-from-other-developers-43d0

この記事を書いた人

keishiro

こんにちは、板川恵司朗です。