CODEWITHSUNDEEP
htmlvideoyoutube
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

YouTube URL in Video Tag

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>

Upvotes: 41

Views: 147732

Answers (7)

krupa hbsoftweb
krupa hbsoftweb

Reputation: 1

Try this solution for the perfectly working

new YouTubeToHtml5();

Upvotes: -6

MrJustin
MrJustin

Reputation: 1076

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>

Upvotes: 59

Rahul
Rahul

Reputation: 1336

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.

Upvotes: 16

aarti
aarti

Reputation: 2865

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

Upvotes: 2

BBQ.
BBQ.

Reputation: 170

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.

Upvotes: 6

user2957312
user2957312

Reputation:

This would be easy to do :

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

Is just an example.

Upvotes: 1

Adrian Roworth
Adrian Roworth

Reputation: 823

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?

Upvotes: 2

Related Questions