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

    <object width="425" height="349">
        <param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1"></param>
        <param name="allowFullScreen" value="true"></param>
        <embed src="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="349"></embed>
    </object>

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

    <object width="425" height="349">
        <param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1"></param>
        <param name="allowFullScreen" value="true"></param>
    </object>

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.

  <object width="425" height="349" 
        type="application/x-shockwave-flash"
        data="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1">
         <param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1"/>
        <p>Interview of Philippe Le Hégaret about Video codec</p>
    </object>

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.

<object width="425" height="349" type="application/x-shockwave-flash" data="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1">
<p>Interview of Philippe Le Hégaret about Video codec</p>
<param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1" />
</object>

Which renders as follows:

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 (46) | 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.

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.

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?

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?

S # 2008-09-08

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

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.

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

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.

Michael # 2009-12-16

This is pretty useful tip.. thank you so much for your help.

Michael Internet Marketing Agency

Tony Q King # 2010-01-16

Yup! It works GREAT! In IE, FF and Chrome-3. Will check Safari soon...

For the last few years I was basically using javascript's document.write("embed ...") to cheat my way around the XHTML W3C validator. Now I can say goodbye to embed - at least for the time being...

Now- if we can somehow get Google to get rid of Adsense's use of TARGET and other depreciated/invalid syntax! Grrrr!

Mohsin # 2010-01-20

Thanks For this Post.. From a long time i am confused how to insert a video and this helps me a lot...

Maria # 2010-02-07

Extremely useful information! Explanation is simple and clear so that everyone can understand it. Thank you:)

jhndnl2012 # 2010-02-12

Thanks for the information I was looking for it. Now I can insert my videos. Thanks once again. Keep up the good work.

Ritu Raj Mishra # 2010-02-16

Ok it is good knowing how to insert videos, but doesn't it make the page very heavy due to lot of code?

Are there any other simple methods

David Winch # 2010-04-12

Thanks for the steer on how to make the YouTube embed code W3C compliant. The following compliant code displays correctly on IE 8.0.6001.18702, Firefox 3.6.3 and Chrome 4.1.249.1045

<object width="346" height="280" type="application/x-shockwave-flash" data="http://www.youtube.com/v/redacted"><param name="movie" value="http://www.youtube.com/v/redacted"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param></object>

This doesn't seem too 'heavy' to me.

Angelverde # 2010-04-20

Gracias, funciona!

NuDigitalMedia # 2010-10-02

Thank you for the information about video and embed codes. I cant tell you how informative your website is. I know use these tools on all of our social media.

johnson # 2010-10-27

Thanks For this Post.. From a long time i am confused how to insert a video and this helps me a lot...

palmiye # 2010-12-16

Thanks For this Post.. From a long time i am confused how to insert a video and this helps me a lot..

кран балка # 2011-01-29

I am so impressed I had to save it so I continously go back and read things I may have skimmed

david compa # 2011-05-23

Thanks For this Post

Karlene Bellize # 2011-09-06

Nice post, dude! I am using Google Chrome, and it runs perfectly....

Donald Fratt # 2011-11-22

Wow, I wanted to put some YouTube videos on my site and validate XHTML 1.1 Strict. This works fine on Chrome, Safari, Firefox, Opera and then I tested IE. There I had to update to the latest Flash player and, yeah, it works across the board. I will play with David Winch's suggestion tomorrow night, but the boss (my wife) is happy to get it the cats and dogs videos working on her website! Thanks a bunch!

Donald Fratt # 2011-11-22

Kudos to David too! Tried his snippet and all is just fine! Thanks guys, you are the best!

jesse ryder25 # 2012-02-21

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.

Riyad Arefin # 2012-06-08

Thanks for post this .......before see this i find the way to set up video on my web site..

Antiques # 2012-08-06

Its very useful information to promote a site via youtube on a web page. Its very simple to insert. thanks for sharing with us.

Sue Bailey # 2013-03-14

Does anyone know how to ensure that once the video is finished playing that it does not provide options to play other videos available on utube? I want only the inteded video to be played on my website (but still connect to the utube video). I understand I can embed the video but I also understand that in order to do this I have to save the video in a variety of different formats for the different servers. Thank you!

Patrick McCarthy # 2013-05-12

I am converting our website from a non-compliant HTML to W3C-compliant XHTML website, and that is how I found your post, which by the way is a great post. my take on it goes like this(and I have tested it in IE and FF - latest versions)

The major addition here being the last parameter (adapted from David Winch's comment of 2010-04-12 above) that allows the user to expand the video to fullscreen, while at the same time remaining W3C compliant (XHTML 1.0)

Thanks again for your post!

Ejones # 2013-07-01

First, Thanks SO very much for this information. Weeks struggling with code that works only here and there.

In answer to Sue Bailey # 2013-03-14 - here is the code that works to remove the related ads at the end of a video and eliminates video information during play.

<object width="450" height="388" type="application/x-shockwave-flash"
data="http://www.youtube.com/v/acFAwWtRMnM?&showinfo=0&rel=0">
<param name="movie" value="http://www.youtube.com/v/acFAwWtRMnM"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="allowFullScreen" value="true"></param>
</object>

Running Linx Mint 13. Tested so far with Firefox 20, 21, Google Chrome 26, Opera 12.15. Still have to check Internet Exploder.

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