タイトルの通り、<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動画だとどうすればいいのか、まとめたいですね。

　ここまでご拝読いただき、ありがとうございました！('ω')ノ