Youtube play button disappears on iphone

Question

I have the following simple two-page html document that uses jQuery Mobile:

<div data-role="page" id="main_page"> <ul id="test" data-role="listview"> <li><a href="#page_1" data-transition="slide">Video</a> </li> <li><a href="#page_1" data-transition="slide">Video</a> </li> </ul> </div> <div data-role="page" id="page_1" data-theme="a">Heres a youtube video: <div id="youtubeVideo" data-theme="a" class="ui-content"> <iframe class="youtube-player" type="text/html" width="100%" src="http://www.youtube.com/embed/cTl3U6aSd2w" frameborder="0"></iframe> And here a html5 video: <video width="100%" controls> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">Your browser does not support the video tag.</video> </div> 

Here it is in action in jsfiddle .

On Iphone, if you move from the first page to the second and play YouTube videos, everything works as expected. But if you press the browser button back and then return to the YouTube video again, you will see that the window is black and the video cannot be played again.

How can I solve this problem?

Please note that my goal is to be able to play videos on mobile platforms.

Answer 1

You need to reload the iframe as soon as you return to the page or when you leave it.

Give the iframe id or class,

 <iframe class="youtube-player" type="text/html" width="100%" src="http://www.youtube.com/embed/cTl3U6aSd2w" frameborder="0"></iframe> 

clone it and replace the existing one with your "clone".

 $(document).on("pagebeforeshow", "#page_1", function () { var iframe_clone = $(".youtube-player").clone(); $(".youtube-player").replaceWith(iframe_clone); }); 

You can use any of the following page events: pageshow , pagebeforeshow , pagehide and pagebeforehide .

Demo ⁽¹⁾

^{(1) Tested on iPhone 5 iOS 7.0.4 - Safari Mobile.}

Answer 2

Best practice is to reload the src attribute when loading is complete:

An example that I did on the map page using google map in iframe:

 $(document).delegate('.ui-page', 'pageshow', function () { $("#mapframe").attr("src","https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=624+Hill+Farm+Lane+Springfield,+PA&aq=&sll=39.930274,-75.289307&sspn=0.289068,0.580215&ie=UTF8&hq=&hnear=624+Hill+Farm+Lane+Springfield,+Pennsylvania 19064&t=m&ll=39.923297,-75.352306&spn=0.063191,0.109863&z=10&output=embed&iwloc"); }); 

In your case:

 $(document).delegate('.ui-page', 'pageshow', function () { $(".youtube-player").attr("src","http://www.youtube.com/embed/cTl3U6aSd2w"); }); 

Give it a try. Hope it works!