Delay jQuery Mobile transition in order to hide embedded Youtube video

I'm using jQuery Mobile to create a site which will display an embedded YouTube clip on one of the pages.

My problem is that when the user tries to na开发者_JAVA技巧vigate to another page, the embedded object remains "over" the page whilst the transition plays. The result is that the video appears over the 2nd page for a split second and it doesn't look good.

I've tried using .hide() on the video when a link is clicked and also tried creating a timeout but to no avail - can someone recommend a solution?

You will have to remove the actual video from the page; this also happens on every browser, because Flash usually appears over all other content.

As it turns out I wasn't capturing the correct event - I was checking for click when I needed to bind to a 'tap' event like so:

$("#link").live('tap',function(){
   $("#video").hide();
});

You can use the 'pagebeforehide' event to remove the flash video, however you can also use youtube's iframe embed method to show the video rather than an embed tag (I have not had problems with persistant flash objects using the iframe method).

$('#youtube_page_id').live('pagebeforehide', function () {
    $('#youtube_embed_id').remove();
});

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">

Another benefit to using the iframe method with youtube is that youtube will detect the device that the user is on and display the proper type of video. For instance if a user is on an iPhone then youtube will display a HTML5 video rather than a Flash video.