wordpressを使ってyoutubeの動画を紹介することは結構多いと思います。でも、youtubeの埋め込みってかなり重いですよね！！動画を1、2個のせる程度ならまだ我慢できますが、1ページに10個20個とyoutube動画を埋め込むと、IE（インターネットエクスプローラ）だと、確実にクラッシュします。
※先日書いた、【ジャンル別】クリエイティブな結婚式余興ムービー31選！は、なんと31個もyotuube動画を埋め込んだので、悲惨なものでした。。(フリーズして動かなくなる）

そこで、軽量化するために、いろいろと調べていたところ、とっても参考になる記事を見つけました。
【wordpress】youtubeの埋め込み動画が重いのを解決する

簡単に概要を説明すると、youtube動画をiframeで読み込む前に、画像として書き換えて表示させてしまい、画像をクリックすると、youtube動画に切り替えるというもの。

なるほど！それならば、一度に31個のyoutube動画を読み込む必要が無いのでよさそう！！さっそく921logにも反映してみました。

コピペでできるyoutube埋め込みの軽量化の方法

以下のphpとscriptをコピーして張り付ければ完成です！

PHP：function.phpに追記

まず、function.phpに以下を追記します。※function.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");

javascript：footer.phpに追記

次に全ページ共通のfooter.phpに以下のscriptを記載すれば、完了です。

 <script>
 $(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);
   // 画像を排除しiframeに置き換え
   $(this).html('<iframe width="546" height="350" src="http://www.youtube.com/embed/' + id + '?feature=oembed" frameborder="0" allowfullscreen=""></iframe>');
   // クリックイベント無効
   e.preventDefault();
   });
 });
 </script>

少しだけカスタマイズ：シングルページだけにscriptを記述する

上に書いた、javascriptをfooter.phpに記述すると固定ページやアーカイブページなど、動画を掲載しないページにもjavascriptの記述が追加されてしまいます。そのままでも特に問題はないのですが、余計なページにタグが入ると、読み込みが遅くなる原因になるので、シングルページだけに表示させたい場合は下のように記述します。

 <?php if(is_single()) : ?>
 <script>
 $(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);
   // 画像を排除しiframeに置き換え
   $(this).html('<iframe width="546" height="350" src="http://www.youtube.com/embed/' + id + '?feature=oembed" frameborder="0" allowfullscreen=""></iframe>');
   // クリックイベント無効
   e.preventDefault();
   });
 });
 </script>
 <?php endif ?>

1行目の<?php if(is_single()) : ?>は、wordpressでよく使うタグで、シングルページ(記事)のみに表示させるときの分岐などに使います。タグの意味は、「もしシングルページだったら囲まれた範囲を表示させる」というものです。記述の最後には必ず、<?php endif ?>を付けるようにしましょう。

おわりに

実際のデモは、【ジャンル別】クリエイティブな結婚式余興ムービー31選！をご覧ください。31個youtubeを並べているのに読み込みがとっても早いです。
これはやらなきゃ損です！wordpressを使ってる方はぜひ参考にしてみてください。