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を使ってる方はぜひ参考にしてみてください。
