【動画URLコピペでOK】YouTubeの埋め込み動画をめっちゃ簡単に軽くする方法

2017-02-09

ブログを書いているとYouTubeの動画を記事に埋め込むことがありますよね。
1記事に1〜2動画程度なら特に問題もないと思うんですが、1記事に多くの動画を埋め込むとページの読み込みが遅くなってしまい、読者にもSEO的にもよろしくありません。

ということで、早速埋め込み動画を軽くする方法を導入したいのですが、わがままな僕の理想の方法は

動画URLをコピペするだけで、埋め込み動画を軽くする
レスポンシブで埋め込める

の、2つ。

埋め込み動画を軽くしたいけど、動画URLコピペ以上に手順が増えたりコードを記入したりするのは嫌なんですよね。
そんなわがままな僕の理想にがっちり当てはまった「YouTube Speedload」というWordPressプラグインをご紹介したいと思います。

YouTube Speedloadとは？

簡単に言うとYouTubeの埋め込み動画を簡単に軽くしてくれるWordPressプラグインです。

通常、記事を開くと同時に動画を読み込むのでページの読み込みが遅くなるのですが、このプラグインをインストールすると埋め込み動画をまずは画像として表示します。
そして画像をクリックする事で動画の読み込みが開始されるので、ページの読み込みが軽くなります。

YouTube Speedloadのインストール

WordPress公式プラグインページからインストールできます。
Youtube SpeedLoad | WordPress.org

YouTube Speedloadの設定

インストール後、有効化するだけでOKと言いたいところですが一点だけ。

Responsive embedsにチェックをいれましょう。これをオンにすることで埋め込み動画がレスポンシブに対応されます。
Clear oembed cacheはページを開く際、さらに軽くする為のキャッシュを消去するので、通常はチェックを入れずオフのままでいいと思います。

YouTube SpeedloadをSSL対応にする

当ブログはSSL対応しているのですが、生成されるサムネイル画像が http:// で生成されてしまうので https:// で生成されるようにプラグインをカスタマイズします。

プラグイン内のyoutube-speedload.phpの188行目と198行目に変更を加える必要があります。
188行目

$thumb_url  = "//img.youtube.com/vi/{$json['video_id']}/{$json['picprefix']}default.jpg";

変更後↓

$thumb_url  = "https://img.youtube.com/vi/{$json['video_id']}/{$json['picprefix']}default.jpg";

198行目

$html = "$wrap_start<div class="ytsl-click_div" data-iframe="$ytsl" style="$fixed position:relative;background: url('$thumb_url') no-repeat scroll center center / cover" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"><div class="ytsl-title_grad"><div itemprop="name" class="ytsl-title_text">{$json['title']}</div></div><div itemprop="description" style="display: none" >{$json['description']}</div><img itemprop="thumbnailUrl" src="http:$thumb_url" style="display: none" alt="{$json['title']}" /><meta itemprop="uploadDate" content="{$json['published']}" ><meta itemprop="duration" content="{$json['duration']}" ><link itemprop="contentUrl" href="//www.youtube.com/watch?v={$json['video_id']}" /><link itemprop="embedUrl" href="//www.youtube.com/embed/{$json['video_id']}" /><div class="ytsl-play_b"></div></div>$wrap_end";

変更後↓

$html = "$wrap_start<div class="ytsl-click_div" data-iframe="$ytsl" style="$fixed position:relative;background: url('$thumb_url') no-repeat scroll center center / cover" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"><div class="ytsl-title_grad"><div itemprop="name" class="ytsl-title_text">{$json['title']}</div></div><div itemprop="description" style="display: none" >{$json['description']}</div><img itemprop="thumbnailUrl" src="$thumb_url" style="display: none" alt="{$json['title']}"><meta itemprop="uploadDate" content="{$json['published']}" ><meta itemprop="duration" content="{$json['duration']}" ><link itemprop="contentUrl" href="//www.youtube.com/watch?v={$json['video_id']}" /><link itemprop="embedUrl" href="//www.youtube.com/embed/{$json['video_id']}" /><div class="ytsl-play_b"></div></div>$wrap_end";

そのままコピペするだけでSSL対応が可能です。