CODEWITHSUNDEEP
htmliosyoutubehtml5-video
rickyit
rickyit

Reputation: 263

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?

Upvotes: 20

Views: 23187

Answers (6)

Joy-Kevin
Joy-Kevin

Reputation: 33

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.

Upvotes: 0

Jerry
Jerry

Reputation: 598

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 :)

Upvotes: 0

hung phan
hung phan

Reputation: 119

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.

Upvotes: -1

M Katz
M Katz

Reputation: 5436

@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

Upvotes: 0

damienc88
damienc88

Reputation: 1977

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>

Upvotes: 2

Hejazi
Hejazi

Reputation: 17015

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.

Upvotes: 26

Related Questions