javascriptを使って複数のYoutube動画を貼り付けても重くならないようにする方法

昔「◯◯な動画100選」っていう記事を開いたら1ページにYoutubeが100個掲載されていて、
パソコンが爆発した事があったので、これ以上被害者を増やさない為に紹介をします。

動作

1. iframeタグを見つけたら全てその動画のサムネイル(img)に置換する。
2. サムネイルをクリックすると、その動画のiframeが呼び出されてimgがiframeに置換される。

コード

movies.js

$(function (){
    var movies = [];
    var images = [];
    //全てのiframeタグに対して処理を実行する。
    $('iframe').each(function(index, element) {
        //iframeの中のsrc(埋め込みタグのURL)を取得。
        var movie_src = $(this).attr('src');
        //取得したURLはmovies配列に格納。
        movies[index] = movie_src
        //URLから動画idのみを取得して、文字連結をしてサムネイルを取得。
        images[index] = 'http://i.ytimg.com/vi' + movie_src.substring(movie_src.lastIndexOf("/")) + '/maxresdefault.jpg'
        //iframeをサムネイル画像に置き換える。
        $(this).after('<img src="' + images[index] + '" class="movie" width="560">').remove();
    });

    $('.movie').each(function(index, element) {
        //サムネイルがクリックされた時の処理
        $(this).click(function (){
            //iframeに置き換え。
            $(this).after('<iframe src="' + movies[index] + '?autoplay=1" width="560" height="315"></iframe>').remove();
        });
    });
});

movies.html

<iframe width="560" height="315" src="https://www.youtube.com/embed/aAeLkFjaFgQ" frameborder="0" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/EpjcgOz_uQ0" frameborder="0" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/_YrYCRYR-ig" frameborder="0" allowfullscreen></iframe>

動画IDの抽出

以下のコードで、movie_srcに入ったURLの一番最後の/を見つけてそれ以降の文字列を取得。

movie_src.substring(movie_src.lastIndexOf("/")

実行結果

movie_src = "https://www.youtube.com/embed/aAeLkFjaFgQ";
movie_src.substring(movie_src.lastIndexOf("/")
//=> /aAeLkFjaFgQ

参考
substringメソッド:http://www.ajaxtower.jp/js/string_class/index7.html
lastIndexOfメソッド：http://www.red.oit-net.jp/tatsuya/js/string.htm#lastIndexOf

動画のサムネイル

Youtubeに動画をアップすると自動でサムネイルが作成される。
その時のそれぞれのURLは以下のようになる。

サイズ	URL
120x90	http://i.ytimg.com/vi/動画ID/default.jpg
120x90(パターン1)	http://i.ytimg.com/vi/動画ID/default.jpg
120x90(パターン2)	http://i.ytimg.com/vi/動画ID/2.jpg
120x90(パターン3)	http://i.ytimg.com/vi/動画ID/3.jpg
320x180	http://i.ytimg.com/vi/動画ID/mqdefault.jpg
480x360	http://i.ytimg.com/vi/動画ID/hqdefault.jpg
480x360	http://i.ytimg.com/vi/動画ID/0.jpg
640×480	http://i.ytimg.com/vi/動画ID/sddefault.jpg
1280x720	http://i.ytimg.com/vi/動画ID/maxresdefault.jpg

参考サイト：http://emiac-works.com/coding/youtube-get-thumbnail-easy-way/

今回のコードでは以下のようにして、サムネURLを生成している。

'http://i.ytimg.com/vi' + movie_src.substring(movie_src.lastIndexOf("/")) + '/maxresdefault.jpg'
//=> http://i.ytimg.com/vi/aAeLkFjaFgQ/maxresdefault.jpg

最後に

この記事によって、動画大量貼り付けテロの被害者が一人でも減れば嬉しいです。