Show Youtube Video Source into Html5 Video Tag

<video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>

Howto Play YouTube videos via HTML5 video tag

There isn't really a reliable way to actually play a YouTube video inside a real video tag. YouTube doesn't want you doing that, and it's probably against their TOS. In any case, that URL is probably going to change regularly, whether YT adjusts their infrastructure or they go out of their way to stop people from directly accessing the video files.

However, there are a few steps you can take to be able to do just about everything you could do if you were using the video tag. To start, you can add the "html5=1" hint to the embed, which will tell youtube to use html5 video instead of Flash (it usually complies, but not always). The video will be in an iframe, but you can apply all the usual CSS tricks to that iframe - opacity, transforms, etc.

If you're using the YouTube API, add html5: 1 to the playerVars. If you're just doing a straight iframe embed, add it to the query string like this:
http://www.youtube.com/embed/okqEVeNqBhc?html5=1

Now, if you want to go one step further, Popcorn.js now has a nifty wrapper object for the YouTube API that will make a YouTube (they have one for Vimeo too) video behave like an HTMLVideoElement, with most of the same properties, methods and events. It isn't perfect, but it's pretty good.

Note: The official source for that file is on the mozilla/popcorn-js repo, but this one is currently ahead with bug fixes and features. You need to include the latest version of Popcorn.js and wrappers/common/popcorn._MediaElementProto.js from that repo. Make sure you add &html5=1 to the YT URL when you set the src.

The differences you'll notice are:

• Even with the wrapper, the HTML5 video API just performs a little bit better than the YT API. e.g., more responsive and better reporting of buffering.

• You can't get rid of the YouTube icon in the lower right corner that shows up on pause or mouseover.

• You can't keep YouTube from showing ads.

• You can't access the actual video/audio content for things like the Audio API and canvas/webgl drawing. But you couldn't do that anyway because of cross-origin restrictions.

YouTube URL in Video Tag

MediaElement YouTube API example

Wraps the YouTube API in an HTML5 Media API wrapper, so that it can be programmed against as if it was true HTML5 <video>.

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />

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

<script>
    var player = new MediaElementPlayer('#player1');
</script>

HTML video tag display Youtube video

You can't use the HTML5 video tag for youtube videos, it only supports files that are either MP4, WebM and Ogg. W3C Schools

Youtube already provides you with an "embed" function on their page which auto generates the iFrame for you. Youtube Embed There are a few other methods but they are no longer used (deprecated). Youtube API

As for the issue with IE, maybe have a look at this similar question: YouTube iframe embed code not working in IE

The only way around the issue if you want to use the HTML5 video tag is to download the Youtube video in one of the specified formats.

---

Related Topics