-->

Click

あなたのブログのYouTube動画はスマホで崩れてませんか?

2020/11/30

WebDesign YouTube

Designed by natanaelginting / Freepik

はじめに

この記事はブログでユーザーフレンドリーにYouTube動画を表示再生する方法の説明です。

後で説明しますが、普通に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


<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>


レシポンシブ対応の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動画の遅延読み込み方法

「はてなブログ」で管理人は最初SHIROMAさんのYouTube軽量化方法を試してました。

brooklyn.hatenablog.jp

www.noname-note.com


しかし、実行にはjQuery導入と2回クリックが必要だったので、Lazysizeを使ったAkira先生の方法に乗り換えました。

vanillaice000.blog.fc2.com


そして最近<iframe> のネイティブ Lazy-load がWeb標準になり、Chrome76からLazy-lodeが利用できるようになりました。

www.suzukikenichi.com


現在、多くのブラウザで利用できるようになっており、JavaScriptも不要なので「Blogger」ではLazy-lodeを使ってます。

この方法が一番簡単なので、レスポンシブ対応と合わせて実施をおススメします。


Lazy-loadの設定方法

iframeタグの中にloading="lazy"属性を追記するだけです。

超簡単ですね。



YouTubeの装飾

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

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

vanillaice000.blog.fc2.com



Justin Bieberのクリスマス・アルバム"Mistletoe"のOfficial Music Videoも飾ってみました。この動画は4Kなので、4Kディスプレイの方は全画面表示で楽しんで下さい。


まとめ

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

また、たくさんのYouTube動画を埋め込んむ場合は、Lazy-loadの属性を追加することで遅延読み込みができ、サイトのスピードが遅くならないようになりました。

但し、loading="lazy"はbackground画像には対応してないので注意が必要です。


気軽に足跡残してね!

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

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

Advertisements

Author

自分の写真
このブログのヒーローヘッダーは「きれいなお姉さん」がブラウザのアクセプト比に合わせてランダムに表示されます。
\ Follow me! /

Follower

Labels

PC (8) Internet (7) Blog (6) Windows10 (6) Repair (5) WebDesign (5) YouTube (5) Blogger (4) hatenablog (4) CSS (3) Cooking (3) Review (3) SEO (3) Domain (2) GitHub (2) HDD (2) HTTPS (2) JavaScript (2) MFI (2) Node.js (2) Anime (1) Beer (1) Browsersync (1) Coding (1) Customize (1) Editor (1) Git (1) Google (1) Monitor (1) New Year (1) Nomad Code (1) Smart Watch (1) Twitter (1) iPhone (1) nodist (1)

Sponsored Links

QooQ