Making youtube.com/embed URLs work on iOS

Question

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?

Answer 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.

Answer 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>