[wordpress] youtube埋め込み動画を軽量化させる方法

執筆:singo(痩せました)

youtube埋め込み動画を軽量化
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を使ってる方はぜひ参考にしてみてください。

WEB制作 ,
公開日:

関連記事

wordpress・さくらインターネット・お名前.comでドメイン変更

簡単で安全なwordpressのドメイン変更方法5ステップ

先日、921log.x0.comから921log.comへドメインを変更しました。wordpre

記事を読む

d2dv8ptxfopuxj.cloudfront

android版も登場!コカ・コーラの自販機アプリをさっそく使ってみた!

コカ・コーラで面白いアプリが公開されたので、使ってみました。自販機と連携したアプリです。 本日

記事を読む

11665860764_6222be917c_b

2014年 正月のスゴイwebサイトまとめ+おまけ

あけましておめでとうございます。早いもので2014年です。 今年の正月も、年明け早々に公開され

記事を読む

コカ・コーラ 氷のボトル

日本初上陸!氷のボトルに入ったコカ・コーラを入手する方法

速報!7月7日から氷でできたコカ・コーラボトルが当たるキャンペーンがスタートするみたいなのでシェ

記事を読む

GAIQ認定証

GAIQ合格!認定試験の受け方とサンプル問題集

2014年10月末にGAIQ(Google Analytics Individual Quali

記事を読む

d2dv8ptxfopuxj.cloudfront
android版も登場!コカ・コーラの自販機アプリをさっそく使ってみた!

コカ・コーラで面白いアプリが公開されたので、使ってみました。自販機と連

en
こまどり幼稚園・小峰幼稚園・小鳩幼稚園を比較!幼稚園選びのポイント

うちの娘の幼稚園選びが始まって、いろいろな園を調べました。そして最

小鳩幼稚園
幼稚園戦争!小鳩幼稚園篇

うちの娘も、いよいよ来年から幼稚園に通い始めます!しかし、まずはど

あの頃の集合写真理論
【Many friends理論】友達を多く見せる5つのテクニック

友達が少ないそこのあなた、友達を多くみせるテクニックを知りたくないです

SONY DSC
ライザップみたいに痩せられるか?!2ヵ月食事制限と筋トレした結果・・・

https://www.youtube.com/watch?v=oTE

→もっと見る

  • 921Logは2人で運営しています。
  • 921Logは、2人の921が27年間で学んだ
    知識・経験を記録するサイトです。

    2013/9/21にオープンしました。

PAGE TOP ↑