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?

Hausa

iPhone uses h264 for HTML5 video. Do some other clips work? Maybe you have material which youtube has not encoded for h264? – Mosby

I have the same problem. I'm displaying YouTube videos in a Colorbox modal, using the /embed/[code] version of the YouTube URL. No video on all of YouTube works when you use that /embed/[code] URL, even if you visit it directly in Safari. If you go to the /watch?v=[code] URL, however, you can see it just fine. This is a major showstopping bug for us right now. – Await

When you click on the "Flash / Video (Iframe/Direct Link to YouTube)" link on the ColorBox demo page, does it work for you? It plays correctly on my iPhone (iOS 5.1.1). – Sumikosumma

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.

Steviestevy

I'm not sure that trying to use the flash player is going to be a solution for iOS. – Fugate

@Fugate Well, did you try it? It actually works because Apple replaces this html tag with an embedded native movie player that can play the video. Just try it and see :) – Steviestevy

Well color me surprised. TIL. – Fugate

@75th Trombone, have you reviewed this Answer since the grace period on your Bounty is set to expire soon? At 8 Upvotes and counting, SO Members agree this is a solution. Thanks. – Eberly

I did see this answer when it was first posted, but didn't award the bounty at that point because it wasn't quite suitable for my specific situation (I was hoping for something that used an iframe instead of Apple's substituted widget, which caused erratic behavior in a Colorbox modal). I meant to come back and award it at the last minute if nothing else came up, but failed to come by on the last day of the bounty, and I'm really, really sorry about that. :( – Await

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"youtube.com/embed/VIDEO_ID"]]]; is all it takes – Obsolesce

Note that protocol-relative urls won't work here - i.e., you must use youtube.com, not //www.youtube.com. – Blowpipe

Does not work for me, it says: Missing Plug-in and not show the video – Cloutier

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>

Velour

Answer 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

Tang

Answer 4

While @Hejazi's answer worked for me, this solution is no longer recommended.

@M Katz's answer worked for me too, and I think it is better.
Only two parameters in iFrame src link was needed though - enablejsapi set to 1 and origin set to your domain.

For example:

<iframe src="https://youtube.com/embed/5i9SzaumaRg?enablejsapi=1&origin=https://example.com/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Hope this helps :)

Sycamore

Answer 5

If you're having trouble displaying an <iframe> in Safari/iOS or Firefox, check this potential issue in addition to the other answers:

Nesting within Inline Elements doesn't work: Ensure that the <iframe> element is not nested within e.g. a <p> or <span> element.

While it's generally not recommended to nest within inline elements, Firefox and Safari/iOS are particularly sensitive to this and won't display the <iframe> content as intended.

Dudeen

Answer 6

I have a website that uses youtube api v3 to find videos and then play them. I host the web in gdrive. Get the link, pass the link to the adress bar of the FIREFOX ios app. Save this html in FF app. It works just as well as when using a desktop. But ios FF is very unfriendly, it doesn’t share the html source to anywhere else.

Better than FF, you can use ios Aloha browser. And best of all, after saving html to ALOHA, share it into the ios KODER html editor. Inside KODER, you can edit the html (for example, add <base href=“...”> and ect ...), you can perfectly render this html. Finally you can share (upload) the html to Dropbox, then export it to gDrive.

Plaza