kanso kanso - 3 months ago 31
Javascript Question

jQuery Mobile Popup with custom YouTube Controls

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.

Here is a JSFiddle demo with a basic "Play" button which hopefully helps demonstrate my problem.

Basically, I have the iframe code in HTML:

<iframe id="iframe-video" width="400" height="300" src="http://www.youtube.com/embed/a0gact_tf_0" frameborder="0" allowfullscreen></iframe>


And then, when the video is loaded I do this:

$(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("<span></span>");
$("#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();
}


Loading the video works fine but I can't get the YouTube iFrame API working where I can instantiate the YT.Player. In other words, 'onYouTubeIframeAPIReady' does not fire.

I have tried all sorts of permutations of this JSFiddle code but feel like I may be missing something obvious.

Is it possible to have custom YouTube controls within a jQuery Mobile Popup or javascript modal?

Answer

SEE FIDDLE

<!DOCTYPE html>
<title>JQM latest</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" type="text/css" />


<body>
  <div data-role="page" id="index">
    <a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Launch video player</a>
    <div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
      <a href="#" id="play" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Play</a>
      <br>
      <div id="player"></div>
      <!-- <iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless=""></iframe> -->
    </div>
  </div>
</body>
<script>
  // 2. 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);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'a0gact_tf_0',
      events: {
        'onReady': onPlayerReady
      }
    });
  }

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

  function stopVideo() {
    player.stopVideo();
  }

  $(document).on('click', '#play', function() {
    player.playVideo();
  });
</script>

</html>

Comments