How to stop youtube video programmatically in jQuery - jquery-mobile

Question

I'm developing a simple web application with jQueryMobile, I can swipe between different pages with Youtube videos,
the problem I have is quite simple, I want to stop a youtube video whine I swipe go to the next page,
otherwise the user will have two youtube videos playing in the same time.
here is the Code and the demo :
JSFiddle DEMO + FULL CODE
Here is my awesome full code :
var i =1;
$("body").on("swipeleft",function(){
if (i<2) {
i++;
$.mobile.changePage('#p'+i, {
transition: "slide"
});
}
});
$("body").on("swiperight",function(){
if (i>1) {
i--;
$.mobile.changePage('#p'+i, {
transition: "slide",
reverse: true
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div data-role="page" id="p1">
<iframe width="560" height="315" src="https://www.youtube.com/embed/X9_n8jakvWU" frameborder="0" allowfullscreen></iframe>
</div>
<div data-role="page" id="p2">
<iframe width="560" height="315" src="https://www.youtube.com/embed/UecPqm2Dbes" frameborder="0" allowfullscreen></iframe>
</div>

Answer 1

Given the older version of jQuery you are using, I assume you are using jQuery Mobile 1.3 not 1.4.
You could use the pagebeforehide event to get the iframe of the page you are leaving and then quickly set the src of the iframe to nothing and then back to the video url. This will stop the video from playing.
var TheFrame;
$(document).on( "pagebeforehide", function( event, data ) {
TheFrame = $(event.target).find("iframe");
setTimeout(StopVideo, 500);
});
function StopVideo(){
var vid = TheFrame.prop("src");
TheFrame.prop("src", "");
TheFrame.prop("src", vid);
}
The setTimeout allows the slide transition to complete before messing with the iframe src.
Working DEMO
If you are using jQM 1.4, you can use the pagecontainer widget events instead:
var TheFrame;
$(document).on( "pagecontainerbeforehide", function( event, ui ) {
TheFrame = ui.prevPage.find("iframe");
setTimeout(StopVideo, 500);
});
function StopVideo(){
var vid = TheFrame.prop("src");
TheFrame.prop("src", "");
TheFrame.prop("src", vid);
}