モーダルを閉じたら動画が停止されるようにしたい（remodal.js）

こちらのサイトの「4. モーダルのサンプル（動画がでてくる、YouTube）」を参考にして動画のモーダルを実装しました。
【jQuery】モーダルプラグイン『Remodal』の実装サンプル集

このまま実装するとモーダルを閉じた際に動画が停止されませんでしたので、
以下のページのコードを参考にし、jQueryを書いてみてもうまく動いていないようで、停止されませんでした。
Bootstrap3のmodalでYouTubeの動画を表示、ついでに閉じたら停止、modalのセンター表示02

実際に書いたコードがこちらです。

html
1<a href="#modal_d" class="btn">動画を表示する</a>
2<div class="remodal" data-remodal-id="modal_d">
3<div class="embed-container"  id="youtubeVideo">
4<iframe id="modal-iframe" src="https://www.youtube.com/embed/PI4JABNwB_U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
5</div>
6</div>

javascript
1$(document).ready(function() {
2  $('#youtubeVideo').on('hidden.embed-container', function() {
3    var $this = $(this).find('iframe'),
4      tempSrc = $this.attr('src');
5    $this.attr('src', "");
6    $this.attr('src', tempSrc);
7
8    console.log(tempSrc);
9  });
10});

どなたか解決策をご存知の方がいらっしゃいましたら、ご教授いただけますと幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

remodal.jsのGithubページのイベントを参考にして、

jabascript
1$(document).on('closing', '.remodal', function (e) {
2var $this = $(this).find('iframe'),
3tempSrc = $this.attr('src');
4$this.attr('src', "");
5$this.attr('src', tempSrc);
6});

というように書いたらうまく行きました...
お騒がせしてすみません。
vodkabears/Remodal

投稿2020/05/18 07:05

退会済みユーザー

総合スコア0