Making youtube.com/embed URLs work on iOS

问题

For a given video on YouTube, you can visit http://youtube.com/watch?v=[code] on any iOS device to see the video.

However, if you use the http://youtube.com/embed/[code] URL — for instance, in an iframe on a page or in a Colorbox modal — it will not play on iOS.

For instance, if you use code like this:

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

You just see an error:

Your browser does not currently recognize any of the video formats available. Click here to visit our frequently asked questions about HTML5 video.

To add insult to injury, the link is not clickable on iOS, so I don't know what page that goes to. There is an HTML5 page on YouTube, but it says nothing particularly useful or surprising.

Is there a syntax that can be for iframe embedding that works as expected on iOS?

回答1:

Try this, it just works:

<object>
    <param name="movie" value="http://www.youtube.com/v/[VIDEO_ID]"></param>
    <embed src="http://www.youtube.com/v/[VIDEO_ID]" type="application/x-shockwave-flash"></embed>
</object>

Edit: It works because Apple replaces the html tag with an embedded native movie player that can play the youtube video.

回答2:

Consider using MediaElement.js. It can wrap youtube videos for display as html5 on ios, with flash fallback for other device/browser types.

One of the demos that are provided with the source shows this, and it's fairly simple:

<video width="640" height="360" id="player1">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

<script>
    $('video').mediaelementplayer({
        success: function(media, node, player) {
            $('#' + node.id + '-mode').html('mode: ' + media.pluginType);
    }
    });
</script>

回答3:

@Hejazi's answer didn't work for me. This did:

    <iframe id="myythtml5player" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" width="560" height="315"
    src="https://www.youtube.com/embed/XdMzPdgg6rs?widget_referrer=https%3A%2F%2Ftinybitegames.com&amp;enablejsapi=1&amp;origin=https%3A%2F%2Ftinybitegames.com&amp;widgetid=1" data-tooltip-align="b,c" data-tooltip="YouTube video player" aria-label="YouTube video player" data-title="YouTube video player"></iframe>

This code was copied from YouTube's demo site: https://developers.google.com/youtube/youtube_player_demo

来源：https://stackoverflow.com/questions/10969334/making-youtube-com-embed-urls-work-on-ios

标签

html

ios

youtube

html5-video