Pausing a You Tube video when the page is hidden

Question

I have created a site where instead of "pages" i have created divs that show/hide on different menu clicks using the code below.

The only issue is the You Tube videos on one of the pages, when the user plays the video they then have to stop it otherwise the video continues to play when visiting other pages.

Is there a way to pause the video when the user leaves the page or to just stop the video outright when clicking on another content.

Here is the code for the page navigation

$('#homePage').show();

$('.nav').click(function () {
    $('.page:visible').slideUp('slow'); // or .hide()
    $($(this).data('target')).slideDown('slow'); // or.show()
})

Any help is greatly appreciated

This should help: http://stackoverflow.com/a/11284045/2454376 — mishik, Jun 07 '13 at 15:56
Making Youtube Player in JS is better then Iframe. You can easily control them better if you make them through Javascript code. — Anirudha Gupta, Jun 07 '13 at 15:59
@misik that doesn't stop the video when the videos page div is hidden — George Reason, Jun 07 '13 at 15:59
if you clobber the innerHTML of the iframe's container, the video will stop. — dandavis, Jun 07 '13 at 16:05

score 1 · Accepted Answer · answered Jun 07 '13 at 15:59

Hi this page should help a lot. https://developers.google.com/youtube/iframe_api_reference. You are just going to 'wrap' the video in the youtube Api and use their events and methods already tied to it.

Basically what you will need to do is when the div is closed or a button to x out of the video is clicked you will need to do something like this.

$("#myDiv").click(function () {
    player.stopVideo();
  });

One thing to note is that if you are going to be hidding the showing the div that contains the Iframe you will need to re-add the player everytime it is shown or you will lose your events that are tied to it. I hope this helps.

Pausing a You Tube video when the page is hidden

1 Answers1