« Powdering logos (again) | Main | Learn about SMIL 3.0 and test it! »

How To Insert A Video From Youtube

Youtube gives a way to insert a video in your pages. You can select a few options and the system gives you a piece of html code to insert in your Web page. [embed](http://www.w3.org/TR/2008/WD-html5-20080610/embedded0.html#the-embed "HTML 5") is an element which is part of HTML 5 Working Draft but not part of XHTML 1.0 or XHTML 1.1. The embed element in this example is a fallback of the object element. It says if the object element is not working, use the embed element. So I decided to just cut the embed element in the XHTML 1.1 page. The code stopped working. The video was not displayed at all in the page. It probably means that the object element has no effect at all and embed is always triggered. So I started to explore what was missing. First, the param element is an empty element, so there is no need for a closing element. Then I moved the information in the param element to the object element. And finally I added a textual information about the content of the video in case the video would not work properly.

Interview of Philippe Le Hégaret about Video codec

I finally tested it in **Camino** (Version 1.6.1Int-v2 (1.8.1.14 2008051211)), **Opera** (9.52, Révision 4916), **Firefox** (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1), and **Safari** (Version 3.1.2 (5525.20.1)) and it worked well.

Interview of Philippe Le Hégaret about Video codec

Filed by Karl Dubost on September 8, 2008 1:50 AM in HTML, Technology 101, Video
| | Comments (24) | TrackBacks (0)

Comments

Frankie Roberto # 2008-09-08

Not IE though, eh?

Jordan Clark # 2008-09-08

Unfortunately, this example does not work in Internet Explorer 7 (what a surprise!). To top it off, the page stops loading at the point of the object element in the markup, without even rendering the fallback content (or anything else in the page, for that matter!).

It's ridiculous to think that in 2008, after nearly 9 years, Microsoft's current browser doesn't support the HTML 4 spec properly!

Anyone know how IE8 handles this?

Toby Inkster # 2008-09-08

You will probably be able to restore IE support by adding the param element with name="movie" back in.

zcorpan # 2008-09-08

Isn't the fallback you've used actually a caption for the video that would be useful even if the video worked?

S # 2008-09-08

You should test it in Google Chrome and see how it turns out.

John Dowdell # 2008-09-08

Yup, specs have had a sketchy relationship with reality.... ;-)

When Netscape introduced browser scripting, it also introduced open rendering through plugins. This was invoked by the EMBED tag. Microsoft later had a parallel scheme, using ActiveX Controls and the OBJECT tag. W3C later blessed OBJECT and damned EMBED.

I asked repeatedly at the time, but no one really seemed to discuss what would happen with realworld content, realworld webpages, when EMBED was told to hie thee hence.

Now EMBED's back. Go figure. ;-)

Out in the real world, we start by looking at the engines a site's audience currently uses, and how to display to them. A few years back Drew McClellan tested how then-current browsers did with simple plugin visibility with OBJECT, but didn't check what that did with non-rectangular windows, layering, printing, JavaScript/plugin intercommunication, etc.

Simple specs without U-turns tend to work most smoothly....

jd/adobe

Karl Dubost Author Profile Page # 2008-09-09

I don't have access to Google Chrome but if someone can describe if there are issues, please feel free to do so. Thanks.

Karl Dubost Author Profile Page # 2008-09-09

@zcorpan. I guess, there should be plenty of more clever fallback than the one I have given here. What would you suggest?

Karl Dubost Author Profile Page # 2008-09-09

@Toby: does it work with IE8 beta2. I have no access to IE but I have read that they started to fix the object element. I don't know to which extent. I will fix the param for movie. Thanks.

Liam Morland # 2008-09-10

It works in Google Chrome.

IE8b2 works only if the movie param exists and the " entity is replaced with a quote character (see the data attribute). It continues to work in "Browser Mode: IE7", which is supposed to emulate IE7.

In IE6, the Flash Player plugin loads, but the movie does not. The method works for a local SWF file, but not for a video from YouTube. Even YouTube's suggested embedding code doesn't work in IE6.

If only I lived in a world where I could ignore IE. I could go home early every day! (But let's not loose site of how far we've come. I stumbled upon an article at A List Apart from many years ago that praised the high level of standards compliance in IE5.5!)

The article "Flash Embedding Cage Match" from A List Apart goes through many issues relating to Flash embedding. Their solution to the various compatibility issues is to use DOM scripting (SWFObject 2 came out of the process that followed that article).

It seems to me that the best fall-back content would be a transcript of the movie. Unfortunately, the effort required to create that is large.

Karl Dubost Author Profile Page # 2008-09-11

Thanks Liam! That is super useful information.

Martin Regtien # 2008-10-30

I'm trying to get my websites optimized for Windows Mobile platforms as well when I switch from MAmbo to Joomla. Any pitfalls I should be aware of getting YouTube videos embedded on my sites?

Tammy Powell # 2008-10-30

Liam - your comment providing the info on flash embedding is great, was looking for more info and will give it a shot in Google Chrome.

butter # 2008-12-16

thanxs 1st of all to make it simple. helped me a lot . u willfind a lots of vides now i wiill put it up here at Big Technical

Brian # 2009-01-31

Hi there, thank you very much for this. I had it down to 7 errors on my page and with your help, my page now validates!

I have only checked with Firefox and IE7, but it works fine with these two browsers. Once again, many thanks, Brian

wdalhaj # 2009-02-26

Not working with IE 8.0.6001

Matt # 2009-03-25

Doesn't seem to be working in Firefox 3.1 beta 2 either :(

Tubene # 2009-03-27

Work Perfect in FireFox. thank you so much for sharing!

James # 2009-04-30

I find this works well with Opera also. Thanks for sharing

counterservice # 2009-05-16

I find this works well with Opera also, i will use in my website. thank you very much.

Spinal Stenosis # 2009-06-07

Working like a charm! I was looking for a simple way to embede some videos into my website.

Thanks!

Call Center Outsourcing # 2009-09-24

This is really very simple and extremely useful. it is working great. thanks

Naveed # 2009-10-05

Yes working perfectly, but I dont care about other browsers as long as it is running smoothly in Firefox.

bambo # 2009-10-12

thank you. It very uesful information for me.

Leave a comment

Note: this blog is intended to foster polite on-topic discussions. Comments failing these requirements and spam will not get published. Please, enter your real name and email address. Every individual comment is reviewed by the W3C staff. This may take some time, thank you for your patience.

You can use the following HTML markup (a href, b, i, br/, p, strong, em, ul, ol, li, blockquote, pre) and/or Markdown syntax.

Your comment


About you

This blog is written by W3C staff and working group participants,
 and maintained by Coralie Mercier.
Authorized parties may log in to create a new entry.
Powered by Movable Type, magpierss and a lot of Web Technology