市川ウェブデザイン

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

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

image

原因は?

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

対応してみた

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

 

image

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

YouTubeの横幅とブログ記事の横幅をデフォルトで合わせる。

WordPressでブログを書く時に、Youtubeを貼り付けることがありますが、そのまま貼り付けるとYouTubeのサイズが良い感じになってくれません。今回は、自動的にWordPressのブログにサイズを合わせる方法を書きます。

YouTubeをWordPressに貼り付けます。まずはYouTubeの共有のコードをコピーします。(埋め込みコードではありませんので、注意してください。共有のコードです。)

image

 

自分のWordPressの記事に貼り付けます。実際に記事を見ると、こんな感じです。動画の横幅とブログ記事の横幅が合っていません。いちいち手動で合わせなくてもいいように自動で合わせるようにします。

image

 

そこで、動画の横幅とブログ記事の横幅を合わせます。私のブログ記事は横幅630pxなので、動画サイズも630pxに設定します。方法は、functions.phpに以下を記入します(functions.phpを修正するときは、絶対にバックアップを取ってください)。もし自分のブログ記事の横幅が、調べてもわからない場合は、目分量で適当に合わせてみてください。

 

この設定をした後に記事を確認すると・・・、きちんと動画のサイズが記事の幅と合うようになりました

image

よかったら試してみてください。