Youtube play button disappears on iphone

Question

I have the following simple two page html doc which makes use of 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's 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 navigate from the first page to the second and play the youtube video, all works as expected. But if you hit the browser's back button and then navigate again back to the youtube video, you'll see that the window is black and it is not possible to play the video again.

How might I solve this problem?

Please note that my aim is to be able to play video on mobile platforms.

Answer 1

You need to reload iframe once you visit the page again or once you leave it.

Give the iframe an 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 existing one with its' 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.}