Youtube play button disappears on iphone

问题

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.

回答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.}

回答2:

The best practice is to reload the src attribute again on load complete:

Example that I have done on a 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 work!

来源：https://stackoverflow.com/questions/20283373/youtube-play-button-disappears-on-iphone