Let's be more curious.

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

YouTubeの画面のアクセプト比を保つ方法

はじめに

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

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

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

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

Designed by natanaelginting / Freepik


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

まず何もしない例です。


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>

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

max-width:250px


max-width:350px


max-width:500px


YouTubeの装飾

もうすぐクリスマスなので、お遊びでYouTube動画を装飾してみました。

興味がある方は、Akira先生の記事を参照して遊んでみて下さい。

YouTubeを飾ってみる

YouTubeを飾ってみる

今回は完全に遊びです。 YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・`)...



Justin Bieberのクリスマス・アルバム"Mistletoe"のOfficial Music Videoも飾ってみました。

この動画は4Kなので、4Kディスプレイの方は全画面表示で楽しんで下さい。


まとめ

YouTube動画の埋め込みコードをHTMLで加工しCSSで味付けすることでレスポンシブ対応に修正できました。

便利なCSSを使ってYouTubeをお楽しみ下さい。


気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

https://t.co/t4mlvD9sFS

スマホでYouTube動画をレスポンシブ表示するカスタマイズです。#youtube #responsive #HTML #CSS #Blogger

— heavy-peat (@AfterWork_Lab) December 6, 2020

それでは今回の記事はこれでおしまい。

Next Post Previous Post
No Comment
Please Enter Comments in Light mode
comment url