YouTube URL in Video Tag

Question

I am using the <video> tag, and I want to use any URL from YouTube in it.

I have this http://jsfiddle.net/wCrNw/ but it's not working.

I have checked this Show Youtube video source into HTML5 video tag? but that is not solving my problem.

    <video controls="controls" 
           class="video-stream" 
           x-webkit-airplay="allow" 
           data-youtube-id="N9oxmRT2YWw"  
src="http://www.youtube.com/watch?v=OmxT8a9RWbE"
           ></video>

@deekay don't do that, stick with default iframe tag provided to you by youtube.. and btw I wont be pinged like this, if you need help, henceforth consider chattin in a room else comment on any of my answer :) — Mr. Alien, Nov 09 '13 at 02:41

score 57 · Accepted Answer · edited Dec 31 '20 at 11:14

57

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>

edited Dec 31 '20 at 11:14

Zsolt Meszaros

21,961
19
54
57

answered Nov 21 '13 at 06:08

MrJustin

1,056
7
9

2

Thank you for the bounty, I appreciate it. Did everything work out ok for you? – MrJustin Nov 26 '13 at 01:07
6

The example doesn't show it, but this is necessary: `var player = new MediaElementPlayer('#player1');` – brasofilo Oct 27 '14 at 16:55
4

Hi @MrJustin, the API Example Link doesnt exist anymore. – Ashish Goyal Apr 18 '19 at 20:56
Anyone who knows how to use it with Angular? – Muhammed Ozdogan May 25 '19 at 02:11
2

It does not work now! even in the reference site (https://web.archive.org/web/20140209082346/http://mediaelementjs.com/examples/?name=youtube) – Hamid Araghi May 27 '22 at 11:24

score 14 · Answer 2 · answered May 11 '14 at 16:49

Video tag supports only video formats (like mp4 etc). Youtube does not expose its raw video files - it only exposes the unique id of the video. Since that id does not correspond to the actual file, video tag cannot be used.

If you do get hold of the actual source file using one of the youtube download sites or soft wares, you will be able to use the video tag. But even then, the url of the actual source will cease to work after a set time. So your video also will work only till then.

score 6 · Answer 3 · answered Nov 21 '13 at 15:41

The most straight forward answer to this question is: You can't.

Youtube doesn't output their video's in the right format, thus they can't be embedded in a
<video/> element.

There are a few solutions posted using javascript, but don't trust on those, they all need a fallback, and won't work cross-browser.

score 2 · Answer 4 · edited May 23 '17 at 11:54

2

This will give you the answer you need. The easiest way to do it is with the youTube-provided methods. How to Embed Youtube Videos into HTML5 <video> Tag?

edited May 23 '17 at 11:54

Community

1
1

answered Nov 07 '13 at 15:25

Adrian Roworth

813
1
7
16

score 2 · Answer 5 · answered Nov 22 '13 at 23:24

2

According to a YouTube blog post from June 2010, the "video" tag "does not currently meet all the needs of a website like YouTube" http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html

answered Nov 22 '13 at 23:24

aarti

2,815
1
23
31

score 1 · Answer 6 · answered Nov 07 '13 at 15:37

1

This would be easy to do :

<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

Is just an example.

answered Nov 07 '13 at 15:37

1

thanks fro your help, but i need it in video tag that was my question – Dinesh Kanivu Nov 08 '13 at 03:54
2

This answer does not use the video tag element – Sebastian Paduano Apr 28 '20 at 21:06

krupa hbsoftweb · Answer 7 · 2021-01-18T10:18:37.857

-4

Try this solution for the perfectly working

new YouTubeToHtml5();

edited Jan 18 '21 at 10:18

answered Jan 11 '21 at 06:46

krupa hbsoftweb

1
1

YouTube URL in Video Tag

7 Answers7

MediaElement YouTube API example

Linked