How To Insert A Video From Youtube
Author(s) and publish date
- By:
-
-
Karl Dubost
-
- Published:
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">
<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"></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">
<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"
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" 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
Not IE though, eh?
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?
You will probably be able to restore IE support by adding the param element with name="movie" back in.
@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.
Isn't the fallback you've used actually a caption for the video that would be useful even if the video worked?
@zcorpan. I guess, there should be plenty of more clever fallback than the one I have given here. What would you suggest?
You should test it in Google Chrome and see how it turns out.
I don't have access to Google Chrome but if someone can describe if there are issues, please feel free to do so. Thanks.
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
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.
Thanks Liam! That is super useful information.
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?
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.
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
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
Not working with IE 8.0.6001
Doesn't seem to be working in Firefox 3.1 beta 2 either :(
Work Perfect in FireFox. thank you so much for sharing!
I find this works well with Opera also. Thanks for sharing
I find this works well with Opera also, i will use in my website.
thank you very much.
Working like a charm! I was looking for a simple way to embede some videos into my website.
Thanks!
This is really very simple and extremely useful. it is working great. thanks
Yes working perfectly, but I dont care about other browsers as long as it is running smoothly in Firefox.
thank you. It very uesful information for me.
This is pretty useful tip.. thank you so much for your help.
Michael
Internet Marketing Agency
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!
Thanks For this Post.. From a long time i am confused how to insert a video and this helps me a lot...
Extremely useful information! Explanation is simple and clear so that everyone can understand it. Thank you:)
Thanks for the information I was looking for it. Now I can insert my videos. Thanks once again. Keep up the good work.
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
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
This doesn't seem too 'heavy' to me.
Gracias, funciona!
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.
Thanks For this Post.. From a long time i am confused how to insert a video and this helps me a lot..
I am so impressed I had to save it so I continously go back and read things I may have skimmed
Thanks For this Post
Nice post, dude!
I am using Google Chrome, and it runs perfectly....
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!
Kudos to David too! Tried his snippet and all is just fine! Thanks guys, you are the best!
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.
Thanks for post this .......before see this i find the way to set up video on my web site..
Its very useful information to promote a site via youtube on a web page. Its very simple to insert. thanks for sharing with us.
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!
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!
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.
Running Linx Mint 13.
Tested so far with Firefox 20, 21, Google Chrome 26, Opera 12.15. Still have to check Internet Exploder.