jQueryのlity.jsでモーダルを閉じても動画（MP4）や音声が流れているので、それを止めたいです。

Question

jQueryのlity.jsを使用して動画（MP4）をモーダル表示しています。
動画はスライダーを使用しており３つあります。
困っていることは、閉じるボタンや動画の画面外をクリックするとモーダルは非表示になるのですが、
動画や音声が止まりません。
バックグランドでずっと流れています。
これを止めたいです。

似たような質問が過去にあり、参考にさせて頂きましたが知識不足で上手くできませんでした。
助けて頂けると幸いです。
参考にさせて頂いたURL： https://teratail.com/questions/152646

宜しくお願いいたします。

【HTMLコード】

    <div class="swiper-slide">
     <a href="#video_1" data-lity="data-lity"><img src="img/slider/slider_play.svg" class=" swiper_link"></a>
     <img src="img/slider/1.png">
    
     <div style="display:none">
     <div id="video_1">
      <video src="movie/1.MP4" autoplay muted controls playsinline preloads="none" id="video">
      <source src="movie/1.MP4" type="video/mp4">
      </video>
       <p>お使いのブラウザは古いので、この動画を見ることができません。</p>
     </div>
     </div>
    </div>
  
    <div class="swiper-slide">
     <a href="#video_2" data-lity="data-lity"><img src="img/slider/slider_play.svg" class=" swiper_link"></a>
     <img src="img/slider/2.png">
    
     <div style="display:none">
     <div id="video_2">
      <video src="movie/2.MP4" autoplay muted controls playsinline preloads="none">
      <source src="movie/2.MP4" type="video/mp4">
      </video>
       <p>お使いのブラウザは古いので、この動画を見ることができません。</p>
     </div>
     </div>
    </div>
    
    <div class="swiper-slide">
     <a href="#video_3" data-lity="data-lity"><img src="img/slider/slider_play.svg" class=" swiper_link"></a>
     <img src="img/slider/3.png">
    
     <div style="display:none">
     <div id="video_3">
      <video src="movie/3.MP4" autoplay muted controls playsinline preloads="none" id="video">
      <source src="movie/3.MP4" type="video/mp4">
      </video>
       <p>お使いのブラウザは古いので、この動画を見ることができません。</p>
     </div>
     </div>
    </div>

【javascriptコード】

$(function(){
  $('.lity-close','.lity.lity-opened').click(function(){
    $('video').each(function() {
      var video = $(this).get(0);
      if(!video.paused) {           // videoが一時停止中でないなら
      video.pause();            // video 一時停止
      video.currentTime = 0;    // 次回再生時に最初から再生するなら再生時間を０に
                }
            });
        });
    });

【試したこと】

動画を最初から再生するコードは、要領悪いですが下記のように書いて解決しました。

$(function(){
  $('a.video1').click(function(){
    $('#video1').get(0).currentTime = 0;
    $('#video1').get(0).play();
   });
 
   $('a.video2').click(function(){
    $('#video2').get(0).currentTime = 0;
    $('#video2').get(0).play();
   });
 
  $('a.video3').click(function(){
    $('#video3').get(0).currentTime = 0;
    $('#video3').get(0).play();
   });
});

✖️ボタンおよび動画枠外をクリックして、動画を停止させる方法を下記のようにしてみましたが、いまだ未解決です。

$(function(){
$('button.lity-close','.lity.lity-opened').click(function(){
$('#video1').get(0).pause();
$('#video2').get(0).pause();
$('#video3').get(0).pause();
// video 一時停止
});
});

Comments

[miyabi_pudding]

閉じるボタン？を押した時に、
$('video').each(function() {
の中は通っていますか？？

[mabo1114mo]

初めまして。
$('video').each(function() {　以降は無反応なので、通っていないかもしれません。。

単純に下記のようにしてみたのですが、無反応でした。
$(function(){
$('button.lity-close','.lity.lity-opened').click(function(){
$('#video1').get(0).pause();
$('#video2').get(0).pause();
$('#video3').get(0).pause();
// video 一時停止
});
});

[miyabi_pudding]

> 以降は無反応なので、通っていないかもしれません。。

これを通るようにしないと不可能かと。
なぜ、button.lity-closeというセレクターにしたのでしょうか？
結局、プラグインが生成した閉じるボタンの要素に対して、クリックイベントを付与しなければいけないので、
モーダルが出現したのを確認したのち、閉じるボタンにイベントを、としなければなりません。

また、プラグイン上で閉じるボタンの押下時のコールバックは用意されていると思いますが、それは調べてみましたか？

[mabo1114mo]

ライブラリが生成した✖️ボタンが　button.lity-close　というセレクターでしたので、それに対してクリックイベントをしてみました。知識不足ですみません。
コールバックなど色々検索してみたのですが・・・・

Answer 1

下記、解決したと思ったのですが、これをすると表示内容がたまにおかしくなりますので未解決でした。

合っているのか分かりませんがとりあえず自己解決できました。
display:noneだったセレクタをjqueryであとから表示する時は、click(function〜では発火しなく下記のように on('click'〜と書かなければいけなかったようです。
ご協力ありがとうございました。

$(function(){
  $(document).on('click','.lity-close',function(){
   $('.lity').remove();
    // video 一時停止
   });
});

$(function(){
  $(document).on('click', '.lity-wrap',function(){
   $('.lity').remove();
    // video 一時停止
   });
});

Comments

[mabo1114mo]

解決したと思ったのですが、これをすると表示がたまにおかしくなります。

[mabo1114mo]

videoタグを使わずに<a href　のみの指定に変更したら素直に動作しました。
解決です。