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

WEB制作, wordpress

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

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

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

スポンサーリンク

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

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

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

サンプルコード

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

php

function add_video_replace($content){
    // youtube
    preg_match_all('/www.youtube.com\/embed\/[\/A-Za-z0-9\+\$\;\?\.\%\,\!\#\~\*\/\:\@\&\=\_\-\+]*/', $content, $matches, $youtubeUrl);
    // カウント数
    $count = 0;
    // 置き換え処理
    foreach ($matches[$count] as $val) {
        // 動画URLのID部分取り出し
        $pattern_1 = '/www.youtube.com\/embed\/|[?].+/';
        $val = preg_replace("$pattern_1","",$val);
        // 置き換え文字列を変数に格納
        $youtube_img = "<img src='http://img.youtube.com/vi/{$val}/0.jpg'>";
        // youtubeのiframeだけ検索
        $pattern_3 = '/<iframe.*youtube[^>]*?>.*?<\/iframe>/';
        // 置き換え
        $replace= "<a href='#' class='youtube' rel='tooltip' data-toggle='tooltip' data-placement='top' title='クリックで動画再生'>$youtube_img</a>";
        // 出力 foreach内だと変数が同じになるので回数指定をして回るようにする
        $content= preg_replace($pattern_3, $replace, $content,1);
        $count++;
    }
    return $content;
    }
    add_filter( "the_content", "add_video_replace");

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

javascript

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

$(function (){
        $(".youtube").click(function (e){
        	// 画像のsrcを取得
            var y_img = $(this).children("img").attr("src");
            // 動画IDを抽出
            var id = y_img.slice(26, y_img.lastIndexOf("/") + 0);
            // 画像を排除
            $(this).html('<iframe width="600" height="506" src="http://www.youtube.com/embed/' + id + '?feature=oembed" frameborder="0" allowfullscreen=""></iframe>');
            // iframeを生成

            // クリックイベント無効
            e.preventDefault();
        });
});

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

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

demo

デモがこちら。

動作の条件

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

問題点と改善点

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

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

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

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