YouTube動画のiframe読み込みは、結構重たいです。
なので、YouTube動画を速く表示する仕組みをCocoonに取り入れました。
こんな感じでサムネイルを表示することで、iframeを読み込まず高速化表示させています。もちろんAMPにも対応。
＼エックスサーバー開発のWordPressテーマ／
高速化表示埋め込みの方法
埋め込み動画表示を高速化する方法は簡単です。
YouTubeの動画URLをエディターに挿入するだけです。
1行につき1つのURLを入力するようにしてください。
ビジュアルエディターで入力した場合、埋め込み動画スタイルで表示されるようになっています。
これは、WordPressの埋め込み機能を利用したものなので、このように置き換わるのが正常動作です。
YouTube動画の高速化表示は、特に設定は必要なく「エディターにURLを入力するだけ」の仕様にしました。
YouTubeが生成する「iframe埋め込み」では、高速化表示にあえて対応させていません。
というのも、動画を通常表示させたい場合に、「iframeで埋め込む」という選択肢を残しておきたいからです。
動作確認
他にもいくつか動画を貼り付けておくので、ページをリロードするなどして、読み込み状態を確認してみてください。
通常表示と比較
以下は、同じ動画をCocoon高速化表示と、デフォルトのiframe表示での比較用です。
Cocoon高速化表示
通常のiframe表示
YouTubeプレイヤーをパラメーターで制御する
YouTubeプレイヤーの挙動をパラメーター指定することで変更することも可能です。
パラメーター指定方法はこちら。
注意点
以下注意点。
- Jetpackの埋め込み機能は自動的に無効にされます
- YouTube URL記入をすると必ず高速化対応表示されます（iframeでは表示されない）
- JavaScriptが動作しない環境では、動画は再生しなくなります
まとめ
YouTube動画を1ページあたりに多数掲載しているサイトなどは、かなり読み込みに時間がかかるのではないかと思います。
今回のYouTube高速化表示機能を利用することで、読み込み時間を結構短縮できるかと思います。
この機能は、WordPressプラグインの「Youtube SpeedLoad」のソースコードを参考に、不具合修正・機能追加を加えて作成させていただきました。
コメント テーマの質問はフォーラムへ
Cocoon使わせていただいております。
「URL?t=1m5s」のように開始時間を指定した場合でも、動画の初めから再生されてしまうのですが、これはどうすることもできないのでしょうか。
あまり需要のないことかもしれないのですが、私のブログではほとんどの記事に時間指定したURLを貼っていたので、もし修正できるのでしたら、余裕のある時で構いませんので修正していただければ幸いです。
よろしくお願いいたします。
試しに修正してみました。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ上記のファイルでアップデートしてで試してみていただければ幸いです。
ありがとうございます！時間指定したとおりに再生されました。
素早い対応にいつも驚かされています。今後もわいひらさんの作るものを使わせていただきます。本当にありがとうございます。
動作確認ありがとうございます！
新たにYouTubeをメインにした紹介ブログを作ろうとコチラへたどり着きました。
高速表示、アイキャッチなど最高です！
そこで1つ質問です。
1）表示させる動画サイズを任意のサイズへ変更したいですが、可能ですか？
2）可能な場合、どこのコードを書き換えればいいでしょうか？またはCSSなどをいじる場合であればどこをいじればよろしいでしょうか？
*記事内のトップにくるアイキャッチ画像に対して動画が小さいので投稿記事内限界まで大きくしたいです。
可能です。
ただ、よろしければ、コメントの案内にもあるように、フォーラムの方に書き込んでいただいてよろしいでしょうか。
https://wp-cocoon.com/community/
上記コメントのコピペで良いので、お手数ですがトピックを立てて書き込んでいただければと思います。
※コメントだと同様のカスタマイズをしたい方が検索しても見つけづらいので。
ご返事ありがとうございます。
先ほどトピックを立ててしまいましたが、フォーラムの過去記事にYouTubeサイズに関して回答がありました！今後はフォーラムを参考にさせていただきます。ありがとうございました。
本当だ。ありましたね。
youtube動画の全画面表示について
自分でも、答えたのを忘れていました^^;