モーダルを閉じたら動画も再生停止にする方法（videoタグ編）

こんにちは！
大阪でコーダーをしているゆーたです。
今回はモーダルを使用して、中に動画が埋め込まれている場合に、
モーダルを閉じると、再生されている動画も自動的に再生停止にする方法について書いてみたいと思います。

実際に実案件で少し悩んだので、記事にしようかなと思いました！

クリックするとモーダル内の動画が開き、モーダルを閉じると動画も再生停止します。
demoはこんな感じです↓

テンプレート

基本的なモーダルの記述

基本的なモーダルとしては以下のような感じかと思います。​

jQuery(function () {
   jQuery('.js-modal-open.js-play01').each(function () {
       jQuery(this).on('click', function () {
           let target = jQuery(this).data('target');
           let modal = document.getElementById(target);
           jQuery(modal).fadeIn();
           jQuery("html, body").addClass('active');
           return false;
       });
   });
   jQuery('.js-modal-close.js-play01-close').on('click', function () {
       jQuery('#modal01.js-modal').fadeOut();
       jQuery("html, body").removeClass('active');
       return false;
   });
 });

上の記述内容としては、

jQuery('.js-modal-open.js-play01').each(function () {
jQuery(this).on('click', function () {
.js-modal-open.js-play01というclassを持ったものがクリックされたら、
※eachで回して、同じclassを持った物を探す。

let target = jQuery(this).data('target');
let modal = document.getElementById(target);
targetという変数にはdata-target名を格納。
modalという変数にはdata-target名と同じidの持っている記述内容を格納。

jQuery(modal).fadeIn();
jQuery("html, body").addClass('active');
return false;
変数modalをフェードイン。
その際にhtml,bodyにactiveというclass名を付与。
（activeにはoverflow:hidden;などをかけて背景が動かないように）
return falseを記述することで後の記述に影響が出ないようにリセット。

jQuery('.js-modal-close.js-play01-close').on('click', function () {
jQuery('#modal01.js-modal').fadeOut();
jQuery("html, body").removeClass('active');
return false;
js-modal-close.js-play01-closeというclassを持っているものをクリックすると、#modal01.js-modalというid,class名がフェードアウトし、html、bodyのactiveも付与されない。

と言った感じでしょうか？？

実際にこれでもモーダルは機能するのですが、
この記述内容だと、モーダルを閉じても動画が再生されたままで音声が聞こえっぱなしなんですよね。音声がないものだったらいいかと思うのですが。。。
こんな感じになります↓

テンプレート

そこで、モーダルを閉じると、動画も再生停止にするように以下の記述を追加します。

jQuery(function () {
   let video = $("#player01").get(0);
   jQuery('.js-modal-open.js-play01').each(function () {
       jQuery(this).on('click', function () {
           let target = jQuery(this).data('target');
           let modal = document.getElementById(target);
           jQuery(modal).fadeIn();
           video.play();
           jQuery("html, body").addClass('active');
           return false;
       });
   });
   jQuery('.js-modal-close.js-play01-close').on('click', function () {
       jQuery('#modal01.js-modal').fadeOut();
       video.pause ();
       jQuery("html, body").removeClass('active');
       return false;
   });
 });

追加した箇所は、
まず、変数videoに$("#player01").get(0);としてモーダル内のDOM情報を取得します。
let video = $("#player01").get(0);
以下が参考になりました！

jQuery｢.get()｣で jQueryオブジェクトからDOM要素を取得する方法 - STAND-4U

そして、.js-modal-open.js-play01がクリックされた時には、
video.play();
js-modal-close.js-play01-closeがクリックされた時には、
video.pause ();
をそれぞれ追加しました。

video.play();→video要素を再生する。
video.pause ();→video要素を停止する。

というJavaScript内に元々あるメソッドです。

以上を踏まえてJSを記述すると、
モーダルが閉じた時にも、動画が停止されるようになります！

少し、
let video = $("#player01").get(0);
こちらの部分で戸惑いましたがうまく実装できてよかったです！

是非、youtubeとかではなく、videoタグを使用する場合などに参考にしてくれたら嬉しいです！

TwitterやInstagramやってます！
仕事はフリーで主にweb制作をしております。
台湾好きや興味がある人とお友達になりたいです。
DMお待ちしております。
よろしくお願いいたします！

Twitter:@trizolyuta
Instagram:@yuta208817
portoforio:https://nakamayuuta.sakura.ne.jp/