3 replies to this topic

[lakeebs]

I have my TubePress gallery popping up in a modal window and I wrote a little jQuery so that when the user clicks on the close button, the video gallery fades away:

$('.close-video').click(function( e ){
  e.preventDefault();
  $('#feat-video').fadeOut(500);
});

The problem is that even after the window closes, the video keeps playing. I'm not familiar with using APIs so I was wondering if somebody could help me out. Thanks.

 

Here's the markup:

<div id="feat-video" style="display:none">
  <span class="close-video"></span>
  <?php print TubePressPro::getHtmlForShortcode(); ?>
</div>

[brandon]

Hi LakeEBS,

 

I have asked one of our developers to look at this post.

 

Thanks!

[lakeebs]

Awesome, thank you!

[eric]

What's happening is that while you are hiding the video, the actual <iframe> is still present and playing on the page. Pausing the video can be a little tricky, but is certainly doable using the YouTube iframe API. In your case, something like this might work:

$('.close-video').click(function( e ){
  e.preventDefault();
  $('#feat-video').fadeOut(500);
  var iframeId = $('#feat-video').find('iframe:first').attr('id'),
    player = new YT.Player(iframeId);
  player.stopVideo();
}); 

(Haven't tested this code but it should work fine when using TubePress Pro). As you can see we are finding the <iframe>, grabbing its dom ID, then creating a YouTube player object out of it. Then it's just a matter of calling stopVideo() on the player.

 

Hope that points you in the right direction?