【WPプラグイン】youtube動画の読込みを速くする「Youtube SpeedLoad」

こんにちは！楽じい(“@rakujii7“)です。

今日は、WordPressでブログを運営している方で、You Tube動画の読込みを速くするプラグイン「Youtube SpeedLoad」の紹介です。

記事に動画を埋め込むと表示速度が遅くなると嘆いている方にはオススメのプラグインです。

「Youtube SpeedLoad」のインストール

まず、「Youtube SpeedLoad」のインストールから・・・

プラグインのインストールのやり方は知ってるよ！って方はスルーしてください!(^^)!

• ダッシュボードのプラグイン→新規追加
• キーワードに Youtube SpeedLoad と検索！
• 今すぐインストール

インストールできたら・・・

プラグインを「有効化」すればOKです。

設定項目は1ヶ所だけ

「 Youtube SpeedLoad 」の設定項目は1ヶ所だけです。

ダッシュボードの設定にはインストールした「 Youtube SpeedLoad 」があるので、そこをクリック！

出てくる設定画面のResponsive embedsにチェックを入れる。

これはスマホのレスポンシブに対応するか？のチェックなので有効にしておきましょう。

この時youtubeの要素のwidthを100%にしていないと効果がありません。

Clear oembed cacheはページを開く際、さらに軽くする為のキャッシュを消去するので、通常はチェックを入れずオフのままでいいと思います。

動画を埋め込む方法

動画を埋め込む方法も非常に簡単です。

埋め込みたい動画の共有コードをコピペして記事内に貼り付けるだけ・・・

しかも投稿モードのビジュアルでも、テキストでもどちらでもOK

動画の再生ボタンが赤色から濃い緑色に変わっていれば、プラグインが正常に動作しているってことなんで、ここでチェックしてください。

埋め込みコードは反応しない

ただし埋め込みコードは反応しないので注意です。

どうしても埋め込みコードを使ってフレームサイズを変えたいのであれば、使っても動画が再生されるので心配はありません。

数多く動画を貼り付けた記事だけに「 Youtube SpeedLoad 」を有効にする方法もありだと思います。

あと過去記事をすべて変更するのが面倒だ！って人もそのままでもOKです。

なぜYou Tube動画の読込みが速くなるのか？

なぜYouTube動画を読込みが速くなるのか？というと・・・

埋め込み動画の表示をサムネイル画像にして、クリックしたら動画を呼び出す方法のようです。

通常は、記事を開くと同時に動画を読込むので、これを画像にすることで表示速度が上がるってわけです。

追記：SSL対応にする

SSL対応しているブログには、YouTube SpeedloadもSSL対応にする必要があります。

生成されるサムネイル画像を https:// で生成されるようにプラグインをカスタマイズします。

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

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

↓188行目の変更後

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

---

$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";

↓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=\"$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";