こちらのサイトの「4. モーダルのサンプル(動画がでてくる、YouTube)」を参考にして動画のモーダルを実装しました。
【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
このまま実装するとモーダルを閉じた際に動画が停止されませんでしたので、
以下のページのコードを参考にし、jQueryを書いてみてもうまく動いていないようで、停止されませんでした。
Bootstrap3のmodalでYouTubeの動画を表示、ついでに閉じたら停止、modalのセンター表示02
実際に書いたコードがこちらです。
html
<a href="#modal_d" class="btn">動画を表示する</a> <div class="remodal" data-remodal-id="modal_d"> <div class="embed-container" id="youtubeVideo"> <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> </div> </div>
javascript
$(document).ready(function() { $('#youtubeVideo').on('hidden.embed-container', function() { var $this = $(this).find('iframe'), tempSrc = $this.attr('src'); $this.attr('src', ""); $this.attr('src', tempSrc); console.log(tempSrc); }); });
どなたか解決策をご存知の方がいらっしゃいましたら、ご教授いただけますと幸いです。
よろしくお願いいたします。
まだ回答がついていません
会員登録して回答してみよう