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

Question

お世話になります。

弊社本店サイトにて、
モーダルウィンドウを使用し、動画の宣伝をしようと思っております。

しかし、モーダルウィンドウを閉じた際、
画面上では、閉じているのですが、動画が再生中のままです。

モーダルウィンドウを閉じたら、
動画の停止もしくは一時停止する方法の記述をご存知でしたら、
ご教示のほど、よろしくお願い致します。


▼モーダルウィンドウ テストページ
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)

	モーダルを表示


    
        
        
            
            閉じる

Answer

ECマスターズの田中です。

YouTube Player APIを利用することで、
iframe内のYouTubeの動画を操作することができます。

公式リファレンスは下記URLで公開されており、
https://developers.google.com/youtube/iframe_api_reference?hl=ja
実際のコードを混じえたわかりやすい使い方が下記URLで公開されております。
https://www.tam-tam.co.jp/tipsnote/javascript/post6217.html

上記をご参照いただきながら、
APIを利用して動画を設置しなおしていただき、
各ボタンクリック時の処理内容に
playVideo() や pauseVideo() の処理を
加えていただきますようお願いします。

実際にコーディングを行う上で、不明な点がございましたら
返信にてお知らせ願います。

Answer

ECマスターズ田中様、
お世話になります。

早速、ページを確認し編集致しましたが、
モーダルウィンドウを閉じても動画は一時停止をしません。
HTMLもしくは、javascriptの記述で間違っている点、不足している点を
ご教示いただけると幸いです。

また、スマホサイズになった場合でも動画の一時停止は動作しますでしょうか。
すみませんが、合わせてご教示いただけると幸いです。

▼HTML

	モーダルを表示


    
        
        
            
            閉じる
        
    
    




▼JSファイル
$(function(){
    $('.js-modal-open').on('click',function(){
        $('.js-modal').fadeIn();
        return false;
    });
    $('.js-modal-close').on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    });
    
});

// IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
       'sample', // 埋め込む場所の指定
        {
          width: 640, // プレーヤーの幅
          height: 390, // プレーヤーの高さ
            videoId: 'qusfigjczho',// YouTubeのID
            event:{
                'onReady': onPlayerReady // プレーヤーの準備ができたときに実行
            }
        }
    );
}

$(function() {

$('#close').click(function() {
        // playerReadyがtrueのときだけ実行
      if(playerReady) {
           ytPlayer.pauseVideo();
      }
   });
});

Answer

ECマスターズの田中です。


> HTMLもしくは、javascriptの記述で間違っている点、不足している点を
> ご教示いただけると幸いです。

YouTubeプレイヤーの準備ができた際に動作する
onPlayerReady 関数が定義されておりませんでした。
プレイヤーの準備状態を確認する、下記、５行分の処理を
sample.jsの末尾に加えていただきますようお願いします。

var playerReady = false;
// プレイヤーの準備ができたとき
function onPlayerReady(event) {
  playerReady = true;
}

また、閉じるボタンを指定した際の処理は
対象となる「#close」が見つからないため、このままでは動作いたしません。

modal.htmlに記載されている、
$('.js-modal').fadeOut();
の直下に、下記１行を挿入していただきますようお願いします。
if(playerReady) { ytPlayer.pauseVideo(); }


> また、スマホサイズになった場合でも動画の一時停止は動作しますでしょうか。
> すみませんが、合わせてご教示いただけると幸いです。

スマートフォンサイズで動作が変わるような記載がされていないため、
おそらく動作するかと思います。
上記修正の上、無事動作した際に、
スマートフォンサイズでも動作をご確認願います。

Answer

ECマスターズ田中様、
お世話になります。

早速、頂いたソースを追加いたしました。
動画は一時停止しませんでした。

HTML、JSで間違っている記述はありますでしょうか。
すみませんが、ご教示のほど、よろしくお願いします。

▼HTMLソース▼








$(function(){
    $('.js-modal-open').on('click',function(){
        $('.js-modal').fadeIn();
        return false;
    });
    $('.js-modal-close').on('click',function(){
        $('.js-modal').fadeOut();
		if(playerReady) { ytPlayer.pauseVideo(); }
        return false;
    });
    
});



*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 1%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

.modal__content iframe {
	width:100%;
}

.js-modal-close {
	text-align:center;
}













	モーダルを表示


    
        
        
            
            閉じる
        
    
    







▼JSソース▼

// IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
       'sample', // 埋め込む場所の指定
        {
          width: 640, // プレーヤーの幅
          height: 390, // プレーヤーの高さ
            videoId: 'qusfigjczho',// YouTubeのID
            event:{
                'onReady': onPlayerReady // プレーヤーの準備ができたときに実行
            }
        }
    );
}

$(function() {

$('#close').click(function() {
        // playerReadyがtrueのときだけ実行
      if(playerReady) {
           ytPlayer.pauseVideo();
      }
   });
});

var playerReady = false;
// プレイヤーの準備ができたとき
function onPlayerReady(event) {
playerReady = true;
}

Answer

ECマスターズの田中です。

JavaScriptエラーなどは特に発生していなかったのですが、
playerReadyがfalseのまま変わらない仕組みになっておりました。

お手数ですが、

var playerReady = false;
// プレイヤーの準備ができたとき
function onPlayerReady(event) {
playerReady = true;
}

sample.jsの末尾に入れていただいた上記５行を、
先頭に移動していただき、動作をご確認願います。

それでも動作しない場合は、
現在のsample.jsの２６行目にある
if (playerReady) {
を
if (true) {
にご変更いただきますようお願いします。

Answer

ECマスターズ田中様、お世話になります。

モーダルウィンドウ、動画の一時停止の動作いたしました。

ご教示頂き、ありがとうございました。