Youtube Url in Video Tag

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>

Show Youtube video source into HTML5 video tag?

Step 1: add &html5=True to your favorite youtube url

Step 2: Find <video/> tag in source

Step 3: Add controls="controls" to video tag: <video controls="controls"..../>

Example:

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

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