Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

「◯◯な動画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

最後に

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

yuyaonrails
プログラミング初心者です。 Ruby on Rails, Swift少々。 Unity勉強中。
div
テクノロジースクールTECH::CAMP、TECH::EXPERTを運営するスタートアップ
http://di-v.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away