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を触る前は必ずバックアップを取っておきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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の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を記載すれば、完了です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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の記述が追加されてしまいます。そのままでも特に問題はないのですが、余計なページにタグが入ると、読み込みが遅くなる原因になるので、シングルページだけに表示させたい場合は下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?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を使ってる方はぜひ参考にしてみてください。