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

板川 恵司朗です。

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

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

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

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

悪い例