Jump to content


These Forums Are Now Read-Only


For TubePress support, please post a question here or open a support ticket and we will be glad to assist.


Photo

How To Stop A Video In A Modal Window Once The Window Is Closed?


Best Answer eric, 15 September 2014 - 02:38 PM

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?

Go to the full post


  • Please log in to reply
3 replies to this topic

#1 lakeebs

lakeebs

    Member

  • Members
  • PipPip
  • 22 posts

Posted 11 September 2014 - 06:12 PM

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>


#2 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1,989 posts

Posted 11 September 2014 - 07:30 PM

Hi LakeEBS,

 

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

 

Thanks!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!


#3 lakeebs

lakeebs

    Member

  • Members
  • PipPip
  • 22 posts

Posted 11 September 2014 - 07:39 PM

Awesome, thank you!



#4 eric

eric

    Lead Developer

  • TubePress Staff
  • 2,787 posts

Posted 15 September 2014 - 02:38 PM   Best Answer

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?