title: Dynamically Pause YouTube Video via Unfocused Window from FancyBox
body: <p>I already know how to play/pause a YouTube video dynamically as you can see from <a href="http://mikethedj4.github.io/kodeWeave/editor/#8d47a5b359582487390ebba52757ea9e" rel="nofollow noreferrer">my weave</a>.</p>
  
  <p>However I'm having difficulty getting it to work dynamically with FancyBox using onBlur (when the window is not focused video should pause).</p>
  
  <p>Here's my Pen: <a href="http://codepen.io/anon/pen/wJXoJy?editors=0010" rel="nofollow noreferrer">http://codepen.io/anon/pen/wJXoJy?editors=0010</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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();
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//www.fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.css?v=1490320405" /&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//www.fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.js?v=1490320405"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>