Youtube動画を遅延読み込みしてブログを高速化する方法(プラグインなし)

この記事では、Wordpressブログの記事内にYoutube動画を埋め込んだ時、ブログの読み込みが遅くなってしまう問題の対策法を紹介しています。

こんな感じになります

ここからはやり方を紹介します。

タップで動画を読み込む関数

以下は、Youtubeのサムネイル画像をクリックしてから動画を読み込むようにする関数です。子テーマのfunction.phpにコピペしてください。

/*Youtube動画の遅延表示*/
function delayYoutube($atts){
	extract(shortcode_atts(array(
		"code" => ''	//URLの末尾部分
	), $atts));
	$retHtml='';
	$retHtml.='<div class="delay_youtube" data-video="https://www.youtube.com/embed/';
	$retHtml.=$code;
	$retHtml.='?autoplay=1"><img src="https://img.youtube.com/vi/';
	$retHtml.=$code;
	$retHtml.='/mqdefault.jpg" alt="" width="320" /></div>';
	return $retHtml;
}
add_shortcode("dtube", "delayYoutube");

共有したい動画のURLを確認

YoutubeのURLの最後の部分をコピーします。

うんたらかんたら~~watch?v=McaEBf-tAlk←これ

動画URLの「McaEBf-tAlk」の部分です。

記事にショートコードを書く

ブログ記事の動画を貼り付けたい位置に、ショートコードを書きます。

code=のところにさっきのMcaEBf-tAlkを書いてください。

こんな感じになります。

スタイルシートで装飾

スタイルシートに以下をコピペして、動画表示を整えます。

/*Youtube埋め込み*/
.delay_youtube{display:inline-block;position:relative;overflow:hidden;width:256px;height:144px;}
.delay_youtube::before{position:absolute;content:"タップで再生";color:#fff;text-align:center;font-size:20px;font-weight:bold;line-height:144px;background:rgba(0, 0, 0, 0.6);top:0;left:0;width:100%;z-index:10;transition:all 0.3s;}
.delay_youtube:hover::before{background:rgba(0,0,0,0.7);cursor:pointer;transition:all 0.3s;}
iframe {max-width: 100%;}

これをやらないと、表示した動画サイズがグチャグチャします。

JavaScriptで動かす

記事の最後に以下のコードを貼り付けてください。

<script>// <![CDATA[
$('.delay_youtube').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>

※貼り付けるのは動画を遅延読み込みしたいページだけでOKです

これで完成です。
タップしたら再生されるYoutube動画が表示されます。

この方法を使うとブログの表示が高速化されます。1ページに複数のYoutube動画を貼っているページに効果的です。

JavaScriptを貼るところは親テーマをいじれば自動化できそうですが、 THE THORテーマでやったところ何だか上手くいきませんでした。動画紹介に特化したサイトじゃない限り、個別に貼っていいと思います。一括でやると、動画を紹介してないページにまでJavaScriptが入るので……。

参考にしたサイト

https://www.notitle-weblog.com/entry/2016/05/21/155650

この関数を作ったのが昔なので、詳しくは忘れてしまったのですが、仕組みは多分、このサイトのまんまだと思います。だからむしろこのサイトを見てください。