スマホでYouTubeの画面のアクセプト比を保つ方法

2023/04/23 2020/11/29

はじめに

この記事はブログに埋め込んだYouTube動画をアクセプト比を保って表示する方法の説明です。

後で説明しますが、普通にYouTube動画を埋め込むとスマホでは画面が崩れてしまうのでレスポンシブ対応が必要です。

画面が崩れて整ってないブログは訪問者が離脱する原因になるので、SEOの観点からも対策が必要です。

これから説明する対策は、Webサイトの品質アップに役立つので、是非お試し下さい。

レスポンシブ未対応の場合

まず何もしない例です。

Mariah Careyの"All I Want For Christmas Is You"をテストで埋め込んでみました。

YouTube動画の「共有」をクリック

「埋め込む」をクリック

「コピー」をクリック

コピーしたコードを記事に埋め込んで終了です。

この動画は上記コードを埋め込んだだけでなので、レスポンシブ未対応です。

このブログをスマホで閲覧の方は、画像の縦横比が崩れた四角形になり残念な状態になっていると思います。

PCで閲覧の方はブラウザの横幅を最小にして見て下さい。同じように画像が崩れていると思います。

この状態で再生ボタンを押すと動画の再生が始まりますが、アイコンやツールバーが通常位置からズレており違和感満載ですね。

このようにレイアウトが崩れたYouTube動画は、どのようにしたら修正できるのでしょうか。

YouTube動画のレスポンシブ対応

WrodPressだとレスポンシブ対応のプラグインが利用できます。HTML/CSSを弄らず設定できるので、HTML/CSSが苦手な方はプラグインの利用をおススメします。

無料ブログの場合は、下記HTML/CSSを追加することで簡単に対応できます。

コピペで出来るので怖がらずやってみて下さい。

なお、必ずプレビューで確認し、問題がないことを確認してから記事を保存下さい。

記事内への埋め込み方法

①記事作成をHTMLビューに切り替えます。
②レスポンシブ対応のCSSを記事のトップに貼り付けます。
③レスポンシブ対応のHTMLを記事に貼り付けます。
④YouTube動画の埋め込みタグをレスポンシブ対応のHTML内に貼り付けます。

レスポンシブ対応のCSS

padding-topを使った方法

コード

<style type="text/css">
  .youtube-warpper {
    position: relative;
    width: 100%;
  }
  
  .youtube-warpper:before {
    content: "";
    display: block;
    padding-top: calc(9 / 16 * 100%);/*アスペクト比 16：9 -> 56.25% */
    overflow: hidden;
  }
  
  .youtube-warpper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  .youtube-warpper-center {
    margin: 30px auto;  /* 中央に配置 */
  }
</style>

aspect-ratioを使った方法

コード

<style type="text/css">
  .youtube-warpper iframe {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;/*アスペクト比 16：9 -> 56.25% */
    top: 0;
    left: 0;
  }
  
  .youtube-warpper-center {
    margin: 30px auto;  /* 中央に配置 */
  }
</style>

コードが半分になって、スッキリしました。

注意

aspect-ratioはiOS15以降から対応なので、iOSが古いiPhoneでは正しく表示されません。iOS14以前がサポート対象外になったのち、切り替えた方が安全だと思います。

レスポンシブ対応のHTML

表示する動画の幅を指定する場合は、style="max-width: 〇〇〇px;"で調整して下さい。指定なしの場合は記事の幅横いっぱいに動画が表示されますが、style属性はすべて削除して下さい。

コード

<div class="youtube-warpper-center" style="max-width: 300px;"> <!-- YouTube動画の表示サイズ幅 -->
    <div class="youtube-warpper">
        <!-- ココにYouTube動画の埋め込みタグを入れる <iframe ～></iframe> -->
    </div>
</div>

以上で作業は終了ですが、いくつかサンプルを表示しておきます。