あっという間に1週間ですね~！
歳を重ねれば重ねるほど、時間がたつのが早くてびっくりします。

 

今回は先週書かせていただいたブログの応用編です。

 

先週は
『colorboxを使用してポップアップしたあとに動画を自動再生したい』
というブログを書きましたが、今回はこの自動再生が終了すると同時にカラーボックスを閉じる！ということをやります♪

これできたらめちゃくちゃ便利です。

 

ひとまずポップアップして自動再生がこれです。

 

See the Pen colorbox_video_autoplay by sayuri (@giraffeweb) on CodePen.0

 

で、問題はここから。

 

 

colorboxで表示した動画を再生終了したら自動で閉じるようにする

JSを以下のように書き換えます。

//自動再生されるだけのJS
$(document).ready(function(){
    $('.inline').on('click', function(){
        $(".inline").colorbox({
            inline: true,
            rel:'group',
			      closeButton:'true',
            onComplete: function(){
            var video = $("#video").get(0).play();
				}
            });	
        });
    });



//自動再生されたあとに勝手にポップアップが閉じるJS
$(document).ready(function(){
    $('.inline').on('click', function(){
        $(".inline").colorbox({
            inline: true,
            rel:'group',
	    closeButton:'true',
            onComplete: function(){
            var video = $("#video").get(0);

            video.play(); //動画の再生

            //動画が終了した時の処理
            video.addEventListener('ended',function() {
	    parent.$.colorbox.close(); //カラーボックスを閉じる
	});
	}
            });	
        });
    });

実装はこんな感じです。

See the Pen colorbox_video_autoclose by sayuri (@giraffeweb) on CodePen.0

簡単でしたね！
みなさんもぜひ使ってみてください～！

• code,
• css3,
• web