• 文字サイズ


解決済

モーダルウィンドウを閉じた際に動画を停止する方法について

  • 相談者:非公開
  • 2020/09/11 16:44
お世話になります。

弊社本店サイトにて、
モーダルウィンドウを使用し、動画の宣伝をしようと思っております。

しかし、モーダルウィンドウを閉じた際、
画面上では、閉じているのですが、動画が再生中のままです。

モーダルウィンドウを閉じたら、
動画の停止もしくは一時停止する方法の記述をご存知でしたら、
ご教示のほど、よろしくお願い致します。


▼モーダルウィンドウ テストページ
https://4860-shop-new-test.suruzo.biz/sp/contents/modal.html


▼ソース(jQuery)
$(function(){
$('.js-modal-open').on('click',function(){
$('.js-modal').fadeIn();
return false;
});
$('.js-modal-close').on('click',function(){
$('.js-modal').fadeOut();
return false;
});

});

▼ソース(html)
<div class="content">
<a class="js-modal-open" href="" data-target="modal01">モーダルを表示</a>
</div>

<div id="modal01" class="modal js-modal">
<div class="modal__bg js-modal-close"></div>
<div class="modal__content youtube">
<iframe src="https://www.youtube.com/embed/NRWKnQrlnAo"></iframe>
<a class="js-modal-close" href="">閉じる</a>
</div>
</div>
キーワード:モーダルウィンドウ
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
2020年は4月から毎週オンラインにて開催し、1900社が参加された90分で学べる楽天集客対策セミナーですが、アップデートをして2021年も開催いたします。

  • 返信者:非公開
  • 2020/09/11 17:19
ECマスターズの田中です。

YouTube Player APIを利用することで、
iframe内のYouTubeの動画を操作することができます。
………(省略)………
  • 返信者:非公開(質問者)
  • 2020/09/14 17:55
ECマスターズ田中様、
お世話になります。

早速、ページを確認し編集致しましたが、
モーダルウィンドウを閉じても動画は一時停止をしません。
HTML………(省略)………
  • 返信者:非公開
  • 2020/09/14 20:03
ECマスターズの田中です。


> HTMLもしくは、javascriptの記述で間違っている点、不足している点を
> ご教示いただけると幸いです。
………(省略)………
  • 返信者:非公開(質問者)
  • 2020/09/15 12:12
ECマスターズ田中様、
お世話になります。

早速、頂いたソースを追加いたしました。
動画は一時停止しませんでした。

HTML、JSで間違っている………(省略)………
  • 返信者:非公開
  • 2020/09/15 14:00
ECマスターズの田中です。

JavaScriptエラーなどは特に発生していなかったのですが、
playerReadyがfalseのまま変わらない仕組みに………(省略)………
  • 返信者:非公開(質問者)
  • 2020/09/16 16:33
ECマスターズ田中様、お世話になります。

モーダルウィンドウ、動画の一時停止の動作いたしました。

ご教示頂き、ありがとうございました。………(省略)………