市川ウェブデザイン

YouTubeの縦横比がスマートフォンにすると崩れる件の対応

YouTubeをスマートフォンで見るとき、縦横の比率が変なときはありませんか?

image

原因は?

わかりません。パソコンで見ると問題ありませんが、スマートフォンなど小さい画面にすると高さが短くなります。埋め込みだとCSS設定が効かないのでしょうか?根本的な原因はわかりませんでした。

対応してみた

YouTubeの縦横の比率は16対9になるらしいです。なので、JavaScriptで縦横比16:9になるように対応しました。コードは下記に載せておきます。責任は持ちませんが、コピペOKです。

 

image

これでYouTubeの見た目が良くなりました。対応完了です。
ただし・・・YouTubeだけに適用した訳ではありません。埋め込みのものが、全て縦横比16:9になってしましました。その点は今後の課題です。