動画をiframeで呼び出すモーダルウィンドウでやっておいた方がいい事(Vimeo版)
タイトルの通り、<iframe>で呼び出した動画を表示・再生する為のモーダルウィンドウでやっておいた方がいい事の備忘録、Vimeo版です。
結論から書いてしまうと、「動画再生中にモーダルを閉じると、動画の再生も停止する」処理をJSのモーダル記述に追加する、です。
記述を追加した後のJSコードはこちら
// モーダルウィンドウ
/////////////////////////////////////////////////////////
$(function(){
var winScrollTop;
$('.js-modal-open').each(function(){
$(this).on('click',function(){
//スクロール位置を取得
winScrollTop = $(window).scrollTop();
//bodyにクラスをつける
$('body').addClass('fixed').css({'top': -winScrollTop});
var target = $(this).data('target');
var modal = document.getElementById(target);
$(modal).fadeIn();
return false;
});
});
//閉じるボタンを押した時の処理
$('.js-modal-close').on('click',function(){
$('.js-modal').fadeOut();
//閉じるボタンを押すとvimeo動画停止
player.pause().then(function() {
console.log('一時停止');
});
//bodyにつけたクラスを外す
$('body').removeClass('fixed').css({'top': 0});
$('body,html').stop().animate({scrollTop:winScrollTop}, 100);
return false;
});
});
※ちゃっかり、スクロール位置の取得などの記述も追加してありますが、これはまた別の機会にでもまとめようと思います……。
そのまま何も考えずに<iframe>で呼び出すだけだと、動画再生中に閉じるボタン(もしくは、モーダルの画面外)を押した場合、モーダルの画面は消えるのに動画の再生は止まらず、音声が流しっぱなしになる、という現象が発生します。
今回はそれを阻止する為に、閉じるボタンを押した時動画が停止するようにする、という訳ですね。
Vimeoでも、Player APIを使用すれば色々とカスタマイズが出来ますが、今回は「動画の一時停止」用の記述だけを使用します。
追加する記述はこちら
player.pause().then(function() {
console.log('一時停止');
});
この記述を、JSの「閉じるボタンを押した時の処理」部分に入れてあげれば問題ありません。逆に、普通のhtml上に複数のVimeo動画を設置したい場合は上記の記述だけだとエラーになるだけなので、注意が必要です。
さいごに
この問題はわりと落とし穴で忘れがちです。そもそも、モーダルウィンドウに<iframe>を追加する事の方が少ないですが……。依頼された時にここまで対応してあったら、バッチリですよね!
恐らく、VimeoよりYoutubeの方が一般的なうえ、こういった問題は多いと思うので、今度はYoutube動画だとどうすればいいのか、まとめたいですね。
ここまでご拝読いただき、ありがとうございました!('ω')ノ
この記事が気に入ったらサポートをしてみませんか?