[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制作 ,
公開日:

関連記事

d2dv8ptxfopuxj.cloudfront

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

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

記事を読む

コカ・コーラ 氷のボトル

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

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

記事を読む

GAIQ認定証

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

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

記事を読む

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

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

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

記事を読む

11665860764_6222be917c_b

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

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

記事を読む

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 ↑