【デモあり】YouTubeの読み込みを軽くする!複数動画埋め込みページを高速化

Tips

YouTubeの動画を1ページに複数埋め込む事があり、埋め込んだ後ページを見てみたらビックリするほど重くなってました・・・
動画を読み込むのに時間がかかっているもよう。

いくら面白い動画をたくさん貼っても、読み込みが遅いと閲覧してくれている人にはストレスを与えてしまいますよね。
なので、今回はこの動画を埋め込み過ぎて重くなったページを改善する方法をご紹介。

WordPressならプラグインなんかもあると思いますが、何がどうなって軽くなっているのかよくわからないし、YouTubeの仕様が変わった時どう対応したら良いのかもわからないので、自分で対応する方法です。

 

 

高速化の概要

YouTubeをそのまま埋め込むと、そのページに埋め込まれた動画全ての読み込みを行います。
そら時間かかりますよね。

デモ作ってみました。高速化前のデモこちら。

先日ご紹介した「YouTubeをレスポンシブで埋め込む」方法で40個の動画を貼り付けています。

開いてみてください。
超重い・・・

これを、ページを表示する際は動画は読み込まず、動画のサムネイルを取得し静止画を表示させるようにしたら動画の読み込み時間が短縮されますね。
で、クリックorタップされた時に動画を読み込みにいけば、動画の読み込みが複数貼ってようが1つずつしか起こらないので速度的に負荷がかからないです。

これを、HTML、CSSとJavaScriptでやっちゃいます。

改善後のデモページがコチラ。
注意点として、スマホで再生する際に通常の埋め込みなら1タップで再生されますが、この方法を使うと画像から動画へ置換、動画を再生という2タップ必要になります。

 

 

HTML

まずは動画を埋め込むHTMLですが、動画ではなくその動画のサムネイルを埋め込みます。

 

<div class="yt">
	<div class="yt_video" youtube="https://www.youtube.com/embed/動画ID?rel=0&showinfo=0&autoplay=1"><img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="" width="100%" height="auto" />
	</div>
</div>

 

ytという要素で囲み、yt_videoという要素にYouTubeの動画IDを含むURLを準備します。
そしてその中にimg要素でその動画のサムネイルを、幅100%、高さ自動で読み込みます。
これで、指定した動画IDのYouTube動画サムネイルを読み込む形になります。

動画IDの後ろの「?」以降はパラメーターなので必要に応じて適宜設定してください。

関連動画rel=」1が表示、0が非表示
タイトル・ユーザー情報showinfo=」1が表示、0が非表示
自動再生autoplay=」1が自動、0が手動
動画の再生位置start=」開始位置の秒数
複数のパラメーターを指定する場合は「&」でつなぎます。

 

 

CSS

次に見栄えを整えるためにCSSを。

 

.yt { /* 動画をレスポンシブ表示、無駄な余白出さないようにパディング設定 */
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.yt iframe { /* 親要素内100%で動画を表示する */
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.yt_video { /* 親要素内100%でサムネイル画像を表示する */
	position: absolute;
	width:100%;
	height:auto;
	top:0;
}
.yt_video img { /* 親要素内100%でサムネイル画像を表示する */
	width:100%;
	height:auto;
}

.yt_video::before { /* FontAwesomeで再生ボタンを画像上に。あっても無くても可 */
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f04b";
	font-weight:900;
	color: #fc0d1c;
	font-size: 70px;
	top: 50%;
	left: 50%;
	transform : translate(-50%,-50%);
	opacity: .90;
	transition:.5s;
}

.yt_video img:hover{ /* ホバー時にカーソル変える */
	cursor: pointer;
	width:100%;
	height:auto;
	box-sizing: border-box;
}

.yt_video:hover::before { /* ホバー時アイコンの色変える */
	color:#32cd32;
	transition:.5s;
}

 

yt、yt iframeは先日と同じレスポンシブ表示の為のCSSです。

詳しくはコチラ。

yt_video、yt_video imgで、サムネイルの表示位置を指定します。
残りのCSSは、サムネイル画像だけじゃ動画ってわからないかなと思い再生アイコンを動画上に重ねてます。
これはあってもなくても問題ありませんが、あった方が親切かなと。
今回はFontAwesomeを使ってます。使いやすいですが結構ハマったりもします。

詳しくはコチラ。

 

 

JavaScript

今回のポイントはコレです。
サムネイル画像がクリックorタップされたら、その動画を再生するという指示をJavaScriptで行います。

$('.yt_video').click(function(){
	video = '<iframe src="'+ $(this).attr('youtube') +'" frameborder="0"></iframe>';
	$(this).replaceWith(video);
});

 

yt_videoというクラスがクリックされたら、そのdiv内にあるyoutubeというURLを取得したiframeに置き換えますよ~という内容です。
$(‘.yt_video’)と(‘youtube’)の箇所を、HTMLの記述と合わせます。
YouTubeのサムネイルを囲むdiv要素の名前と、そこに記載した動画IDを含むURLの名前ですね。
これを書いた改善ページがコチラ

 

 

改善結果

では、これでどれくらい読み込み速度が向上したのか見てみます。

PageSpeed InsightsはYouTubeの読み込みは測定してくれないので、GTmetrixで測定しました。

改善前のページ

YouTube読み込み改善前のページ速度

ページ速度は、F(11%)です。読み込み完了まで17.4秒かかってます。

 

改善後のページ

YouTube読み込み改善後のページ速度

ページ速度は、B(82%)、読み込みはなんと1秒!かなり違いが出ましたね。
まぁ、40個動画埋め込んだので差が大きく出て当然ですが・・・

 

 

さいごに

この方法だとスマホで再生してもらう時に2タップ必要になるというデメリットが1点だけありますが、それでもこれ程速度に差が出れば、導入しても良いと思います。
YouTuberが流行りだして数年経ちますが、動画の人気は落ちるどころか益々上がってますね。
僕も一時期YouTubeで稼げないかな!?と思った事がありますが、才能が無いと考え諦めました・・・

これからも素敵な動画は増え続けると思うので、それをサイトやブログで紹介したくなる機会は増えるでしょう。
そんな時に、重くてストレスに感じられないようなサイトやブログである為、こういったちょっとした事は対応しておきたいですね。

The following two tabs change content below.

たきお

うぇぶめも。運営者のたきおです。 ジョギング・草野球が趣味のクセにぽっちゃり体型。 自分の備忘録も兼ねて、ウェブ系のちょっとした情報などを発信しております。 気に入ってもらえればTwitter・Facebookなどでもフォローして頂けると励みになりますm(__)m

フォローはこちら

Tips

Posted by たきお