FancyBoxのUnfocusedウィンドウからYouTube動画を動的に一時停止する

Question

my weaveのように、YouTube動画を動的に再生/一時停止する方法は既に知っています。

しかし、私はonBlurを使ってFancyBoxで動的に動作させるのが難しいです（ウィンドウがフォーカスされていないときは、ビデオを一時停止する必要があります）。あなたが唯一のぼかしの動画を一時停止しているhttp://codepen.io/anon/pen/wJXoJy?editors=0010

// Show Lightbox Video Onload 
 
$.fancybox.open({ 
 
    youtube : { 
 
    controls : 0, 
 
    showinfo : 0 
 
    }, 
 
    src : '//www.youtube.com/embed/-AszZcClVXA?enablejsapi=1', // Source of the content 
 
    type : 'iframe', // Content type: image|inline|ajax|iframe|html (optional) 
 
}); 
 

 
// Inject YouTube API script 
 
var tag = document.createElement('script'); 
 
tag.src = "//www.youtube.com/player_api"; 
 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 

 
var player; 
 
function onYouTubePlayerAPIReady(e) { 
 
    // create the global player from the specific iframe (#video) 
 
    player = new YT.Player($(".fancybox-iframe").attr("id"), { 
 
    events: { 
 
     // call this function when player is ready to use 
 
     'onReady': onPlayerReady 
 
    } 
 
    }); 
 
} 
 

 
function onPlayerReady() { 
 
    window.addEventListener("blur", function() { 
 
    player.pauseVideo(); 
 
    }); 
 
}

<link rel="stylesheet" href="//www.fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.css?v=1490320405" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//www.fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.js?v=1490320405"></script>

Answer 1

はデモです - http://codepen.io/fancyapps/pen/jBKowp?editors=1010

基本的には、アイデアは、YouTubeのAPIが利用可能になった後、あなたがfancyBoxを初期化して、あなたがfancyBoxコールバック内のYouTubeのAPIメソッドを使用することができるということです。

// 1. This code loads the IFrame Player API code asynchronously. 
var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// 2. This function initializes fancyBox 
// after the API code downloads. 
var player; 

function onYouTubeIframeAPIReady() { 

    $('[data-fancybox="group"]').fancybox({ 
    onComplete : function(instance, current) { 

     if (current.type === 'iframe') { 
     var id = current.$content.find('iframe').attr('id'); 

     player = new YT.Player(id, { 
      events : { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 
    } 

    }); 

} 

// 3. The API will call this function when the video player is ready. 
function onPlayerReady(event) { 
    event.target.playVideo(); 
} 

// 4. Fires when the player's state changes. 
function onPlayerStateChange(event) { 
    // Go to the next video after the current one is finished playing 
    if (event.data === 0) { 
     $.fancybox.getInstance('next'); 
    } 
} 

// Page Visibility API to pause video when window is not active 
$(document).on("visibilitychange", function() { 
    if (player) { 
    if (document.hidden) { 
     player.pauseVideo(); 
    } else { 
     player.playVideo(); 
    } 
    } 
}); 

Answer 2

：

は、ここに私のペンです。ビデオを一時停止するためにmouseoverイベントを使用し、mouseoutイベントを使用しないでください。ここで