【JavaScript】YouTube動画だらけの重たいページを回避しよう【jQuery】
YouTubeの動画をブログに張りたい時、ありますよね。
その場合、YouTubeの動画ページにある貼り付け用のコードを利用すると思いますが、iframeなのでその先の動画の読み込みを行います。
こんな感じ。
１つや２つやくらいなら気になりませんが、「おすすめの音楽紹介！」見たいな感じで１ページにペタペタ張ってるページをしばしば見かけます。
これ、重たくて結構イライラしませんか？
iframeなのでページ全体の読み込みが止まることはありませんが、それでも読み込みにブラウザの処理が占有されてフリーズしたみたいに重たくなることがあります。
※実際、自分も最初にそのようなページを作った時はあまりの重さにビックリして、これはいかんと、この対策に乗り出した訳です。
見てもらう人のためにも、ちょっとした工夫でページを軽くしてみましょう。
リンクタグのみにする
サイトのページをリンクだけにする方法。
これが一番簡単で、読み込みは行わないので当然軽いです。
The Jam - Town Called Malice
でも少し味気ないですね。
リンク＋サムネイルで表示する
YouTubeは動画のサムネイル画像が存在しており、そのアドレスは「http://img.youtube.com/vi/動画のID/ファイル種類.jpg」となっています。
つまり、これをimgタグで設定しておけばサムネイル表示ができる訳ですね。
ファイルの種類は以下が利用できます。
- default (120x90)
- mqdefault (320x180)
- hqdefault (480x360)
- sddefault (640x480)
- maxresdefault (1280x720)
動画が対応している画質に応じて作成されているので、全ての種類が参照できるわけではありません。
mqdefaultならほぼ大丈夫だと思います。サイズ的にこれくらいが丁度良いですね。
動画IDは動画サイトURLのwatch?v=から先の文字列がそれに当たります。
こんな感じになります。
The Jam - Town Called Malice
これだけでも、かなり見栄えはよくなりました。
クリックしたら読み込むようにする
サムネイル表示を加えるだけでも十分な感じもありますが、動画を見るためには別ページに移動する必要があります。
ですので、さらにjQueryを使ってクリックしたらそのページのまま動画を読み込むようにして見ます。
まず、前準備として対象のサムネイルを識別できるようにしておきます。
<div class="youtube"><img class="youtube" src="http://img.youtube.com/vi/動画ID/mqdefault.jpg" /></div>先ほどのサムネイルを、識別できるようにclass属性を付けたdiv要素で囲みます。
後は、以下のスクリプトをhead内に定義します。
$(document).ready(function() {
$('div.youtube').click(function(){
var imgEle = $(this).children('img');
if(imgEle.length > 0) {
var videoId = "";
// src属性にyoutube.comが含まれていたら、動画IDだけを抜き出す
var url = imgEle.attr('src');
if(url.indexOf("youtube.com") >= 0) {
var ids = /[/?=]([-\w]{11})/.exec(url); // 動画IDを抜き出す正規表現
if(ids != null) {
videoId = ids[1];
}
}
// 動画IDが取得できたらiframeタグにして置き換え
if(videoId != "") {
$(this).replaceWith('<iframe class="youtube" src="http://www.youtube.com/embed/'+ videoId +'?rel=0" frameborder="0"></iframe>');
}
}
});
});
※jQueryライブラリ（jquery.js）の読み込みはお忘れなく。
先述の前準備で設定したタグがクリックされたら、img要素をiframe要素で置き換えるスクリプトです。
正規表現で"/"もしくは"="に続く、11桁のハイフン＋アンダースコアを含むどの英数字を抜き出して、それをiframeのsrc属性に繋げてタグを置き換えています。
これで、ページを軽くしてかつ自分のページ上で動画を再生できるようになりました！
いかがでしょうか！？
（記事を書く際は、最初は動画サイトのiframeタグを書いておいて、後はテキストエディタを使って目的のタグに文字置換をするといい感じです）
