コピペで実装!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のソースコードを見たとき、いろいろな面において「なるほどそんな手があったか」と目からうろこでございました。

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

  1. 名前:chan 投稿日:2018/09/12(水) 20:10:19 ID:1661f1504

    わいひらさん、こんばんわ。

    早速、二つをコピーして画像も子テーマにアップロードしました。

    ですが、記事のように画像の右▸マークが表示されていません。

    これは、既存の記事には対応してないと考えて良いでしょうか?

    https://chan-bike.com/tourofbritain8

    それと、新規にurlをテキストで貼りつけると、リンクカードの形式になります。

    何か、ヒントをいただけると幸いです。

  2. わいひら 名前:わいひら 投稿日:2018/09/13(木) 22:47:30 ID:6609a2564

    こんにちは。

    僕の環境からは表示されているようです。

    それと、新規にurlをテキストで貼りつけると、リンクカードの形式になります。

    これは、実際にそういった表示になっているページのURLはありますか?

  3. 名前:chan 投稿日:2018/09/14(金) 10:47:18 ID:07959a817

    寝ログにかかれている記事なので、cocoonでは対応済みと考えてコードを消してました。
    わいひらさんが、見られた時には元に戻していた時間ではないかと思います。

    そこで、もう一つのサイトでコードと画像をアップして記事を作成しました。

    https://chan-biku.club/wordpress/youtube-speedup

    こちらでは、「URL埋め込み形式」にすると真ん中の画像が表示されていません。
    iPhoneでも表示されてなくて、2回クリックすると動画が始まります。

    リンクカード形式になることは無くなりました。

  4. わいひら 名前:わいひら 投稿日:2018/09/14(金) 12:30:59 ID:139ec567d

    画像はどこに保存されているんですか?
    https://chan-biku.club/wp-content/themes/cocoon-child-master/youtube-play.png
    子テーマ直下にはないようですけど。