【jQuery】youtube動画の表示/非表示 #jQuery

開始タグ

youtube動画をモーダルで呼び出す機会も増えていると思うのでメモ。

やりたいこと

・youtube動画のサムネイルをクリックしたらモーダル表示
・モーダル内でyoutube動画を表示
・モーダルを閉じた時、youtube動画の再生をやめる

方法

sample.html

<figure class="modal_active modal01">
    <img src="http://img.youtube.com/vi/ここに動画IDを入れる/maxresdefault.jpg" alt="">
</figure>
<div class="youtube modal_area modal01">
    <iframe class="modal_box" src=""></iframe>
</div>

sample.js

$(function() {
    $('.modal_active.modal01').click(function() {
        // オーバーレイ用の要素を追加
        $('body').append('<div class="modal-overlay"></div>');

        // オーバーレイをフェードイン
        $('.modal-overlay').fadeIn('slow');
        $('.modal_area.youtube.modal01')
            .fadeIn(300)
            .addClass('active');

        //　youtube動画表示（動画URLの挿入）
        $('.youtube iframe').attr(
            'src',
            'https://www.youtube.com/embed/ここに動画IDを入れる'
        );

        //モーダル外をクリックしたら閉じる
        $('.modal-overlay').click(function() {
            $('.modal_area.youtube.modal01')
                .fadeOut(300)
                .removeClass('active');

            //　youtube動画停止（動画URLの削除）
            $('.youtube iframe').attr('src', '');

            $('.modal-overlay').fadeOut('slow', function() {
                // オーバーレイを削除
                $('.modal-overlay').remove();
            });
        });
    });
});

まず、sample.htmlのhttp://img.youtube.com/vi/ここに動画IDを入れる/maxresdefault.jpgの部分は、対象のyoutube動画のIDを入れてあげれば動画に設定されているサムネイルを自動で表示してくれます。sample.htmlに記述されている書き方だと一番大きい画像サイズで表示してくれるので、CSSによる画像サイズの可変にも結構耐えられます。

sample.jsに関しては、モーダルに関しては割愛しますが、youtube動画に関してはクリックしたらiframeのsrc属性を操作してあげることで表示・非表示が操作できます。

$('.youtube iframe').attr(
  'src',
  'https://www.youtube.com/embed/ここに動画IDを入れる'
);

ここでは、クリックしたら引数に指定したyoutube動画URLをiframeのsrcに与えることで、動画の表示を可能にします。

このままだとモーダルを閉じても動画が流れっぱなしになってしまうので、逆にモーダルを閉じるタイミングでiframeのsrc属性の中身を空にしてあげます。

//　youtube動画停止（動画URLの削除）
$('.youtube iframe').attr('src', '');

こうすることで、モーダルを閉じる際に動画を非表示ににして動画を止めたように表現できます。

ただ、この方法だと動画の再生途中でモーダルを閉じた場合、再生位置はリセットされてしまうので、こだわりの強い方はよりよい方法を探してみる方がいいかもしれません。

閉じタグ

結構無理やりな気がする。
より良い方法をみつけたら修正します。