コピペで実装!WordPressに埋め込んだYouTube動画を高速表示するカスタマイズ方法

YouTube動画が埋め込まれているページは、読み込みが遅いです。

それは、以下のようにiframeが埋め込まれてYouTube動画が読み込まれるからです。

iframeでYouTube動画が読み込まれる

今回は、そのiframeをページ読み込み時は表示しないで、最初はサムネイル画像を表示させておき、クリックした時に初めてiframeを読み込むことで高速化を図る方法の紹介です。

こんな感じに。

TVアニメ『ピンポン』PV
上記はYouTubeインターフェースに外観を似せて作った動画サムネイル画像です。
スポンサーリンク
レクタングル(大)広告

カスタマイズ方法

カスタマイズの主な手順はこちら。

  1. functions.phpにコードをコピペ
  2. style.cssにコードをコピペ
  3. 画像をテーマフォルダ直下に配置

基本コピペでカスタマイズできます。

functions.phpにコードをコピペ

テーマ(子テーマ)のfunctions.phpに以下のコードを追記します。

全ての内容を説明するわけにもいかないので、簡単に書きますが、上記コードでは以下のようなことを行っています。

  • URL埋め込みを検知して高速表示用のHTMLに置き換える処理
  • フッターにクリック動作用のJavaScriptを挿入する処理

YouTube URLの埋め込み処理を検知して動作するものなので、YouTubeが生成するiframeで埋め込んでいる場合は、通常表示されます。

style.cssにコードをコピペ

次に、高速表示用のファイルをテーマ(子テーマ)のstyle.cssに追記します。

動画を格納するコンテナの最大幅は640pxになっています。デフォルト表示サイズを調整したい場合は、数値を変更してください。

こちらのCSSをエディター用のCSSファイルで読み込めば、ビジュアルエディター上でも同様に表示されます。

画像をテーマフォルダ直下に配置

最後に以下の画像をダウンロードし、名前を変更しないでテーマ(子テーマ)フォルダー直下に配置します。

youtube-play

テーマ(子テーマ)直下とは、style.cssがあるファイルと同じ階層です。

画像をテーマ直下に名前を変更しないで配置する

ファイルの保存場所を変更する場合は、style.cssのファイルパスも変更してください。

使い方

このカスタマイズを利用するには、WordPressの「URL埋め込み形式」でYouTube URLをエディターに書き込む必要があります。

「URL埋め込み形式」といっても、簡単で単にURLをテキストでエディターの一行に対して書き込むだけです。

URL埋め込み形式でYouTubeを書き込む

動作確認

エディターにURLのみを書き込んだら、以下のように表示されます。

蟲師 特別篇「日蝕む翳」第一弾PV

実写系だとこんな感じ。

「スター・ウォーズ エピソード1/ファントム・メナス」トレーラー

注意点

今回のカスタマイズは、WordPressのURL埋め込みのみに対応しています。

通常のiframeで埋め込んだYouTube動画には対応していません。また対応させる方法の質問にはお答え致しかねますのでご了承ください。

また、すべての動画に対応できるかの保証も致しかねます。JavaScriptが無効になっているブラウザではクリックしても再生しません。

参考

このカスタマイズは、Alexufo氏が作成したWordPressプラグイン「Youtube SpeedLoad」のコードを参考にさせていただきました。

Improve rendering speed pages with YouTube players.

まとめ

とこんな感じで、かなりYouTube動画の読み込み表示時間を短縮できるかと思います。

YouTube動画iframe風の見た目を維持しつつ、表示も高速化するという、一挙両得的なカスタマイズかと思います。

特に、動画などを多く掲載しているサイトには重宝するのではないかと。

Youtube SpeedLoadのソースコードを見たとき、いろいろな面において「なるほどそんな手があったか」と目からうろこでございました。