【wordpress】youtubeの埋め込み動画が重いのを解決する

WEB制作, wordpress

wordpressでブログを書いている時に、youtubeの動画をブログに埋め込んで紹介する事がありますよね。

埋め込み動画が一つだけならまだページ表示速度にさほど影響はないけど、複数の動画を埋め込んでいると大分表示速度が遅くなる。

面白い動画や話題等は人に紹介したくなるもの、それが多ければ多いほどページ表示速度が遅くなってしまう><
なので少しでも表示速度が解消されるように頑張ってコードを書いてみた。

スポンサーリンク

ページ読み込みを軽くする方法

ページ表示速度を上げるために考えたのが、youtubeの動画を読み込む前に画像表示にして、画像をクリックしてから動画を読み込みにいく方法。

何回かテストして体感的に早くなりました。

サンプルコード

functions.phpに以下を追加する
これで記事ページ内の埋め込み動画は画像に置き換わります。

php

youtubeの動画IDだけを抽出するのに書く正規表現で大分はまりました。
ちゃんと正規表現勉強しないとね(;´Д`)

javascript

次に置き換えた画像をクリックして動画を呼び出すコード。
footer.phpに以下を記述

記事単体ページにしか使わないなら、isとかで条件分岐させたほうがいいかもしれない。

これで完了です。
tooltipの表示はbootstrapとか使ってやっています。

demo

デモがこちら。

動作の条件

記事ページのiframeが以下のコードで出力される場合(動画ページの共有で【以前の埋め込みコード】で貼り付けなければ大丈夫)

問題点と改善点

動画単体ページならば読み込みは大丈夫だが、投稿者の動画リストがあるページの埋め込みでは正常に動作しない。具体的には動画IDの取得が出来ない。正規表現で動画IDを取得するのだが、そこの条件分岐をまだ書いていない為。

今はyoutubeにしか対応してないけどviemoとかに対応できたらいいなと思っている。
サムネイル画像を取得する所までは出来ているけど、どうやって出力させるかで悩んでいるところ。

あと画像クリック時にローディングアイコン表示させたほうがいいのかな?

この記事が気に入ったら
『いいね』しよう!


PAGE TOP