title: jQuery Mobile Popup with custom YouTube Controls
body: <p>I would like to create a jQuery Mobile Popup (or any type of javascript modal) which embeds a YouTube Video and allows for custom controls.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/pckanso/dv15xhe3/" rel="nofollow">JSFiddle demo</a> with a basic "Play" button which hopefully helps demonstrate my problem.</p>
  
  <p>Basically, I have the iframe code in HTML:</p>
  
  <pre><code>&lt;iframe id="iframe-video" width="400" height="300" src="http://www.youtube.com/embed/a0gact_tf_0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>And then, when the video is loaded I do this:</p>
  
  <pre><code>$(document).on("pagecreate", function() {
    // bind click events
    $(document).on('click', '#play', function() {
      playVideo();
      return false;
    });
  
    $(".ui-popup iframe")
      .attr("width", 0)
      .attr("height", "auto");
    $("#popupVideo").on({
      popupbeforeposition: function() {
        initYoutubePlayer();
  
        // call our custom function scale() to get the width and height
        var size = scale(497, 298, 15, 1),
          w = size.width,
          h = size.height;
        $("#popupVideo iframe")
          .attr("width", w)
          .attr("height", h);
      },
      popupafterclose: function() {
        $("#popupVideo").html("&lt;span&gt;&lt;/span&gt;");
        $("#popupVideo iframe")
          .attr("width", 0)
          .attr("height", 0);
      },
    });
  });
  
  function initYoutubePlayer() {
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
  
    function onYouTubeIframeAPIReady() {
      alert('onYouTubeIframeAPIReady');
      player = new YT.Player('iframe-video', {
        events: {
          'onReady': onPlayerReady,
        }
      });
    };
  
    function onPlayerReady(event) {
      alert('ready');
    };
  
    alert('initialized');
  }
  
  function playVideo() {
    alert('playVideo...');
    //player.playVideo();
  }
  </code></pre>
  
  <p>Loading the video works fine but I can't get the <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow">YouTube iFrame API</a> working where I can instantiate the YT.Player. In other words, 'onYouTubeIframeAPIReady' does not fire.</p>
  
  <p>I have tried all sorts of permutations of this JSFiddle code but feel like I may be missing something obvious.</p>
  
  <p>Is it possible to have custom YouTube controls within a jQuery Mobile Popup or javascript modal?</p>