Youtube and embedding correctly
Posted on May 5, 2008For some reason when you select the embed option in Youtube the code they provide includes <embed> tags. However these are big no-no’s in HTML. Youtube also have empty <param> tags, which should really end with />. On top of that I’ve still yet to work out why Youtube insist on having the video at 425×355 pixels, when clearly the resolution is only 320 pixels wide. Thus creating a rather blocky video as it is badly upscaled. So instead here is the “easy” way to embed Youtube videos.
Take your original code from Youtube:
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/yVjzd320gew&hl=en"></param>
<param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/yVjzd320gew&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
take note of what is in bold (red) and replace with:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/yVjzd320gew&hl=en" width="320" height="267"><param name="movie" value="http://www.youtube.com/v/yVjzd320gew&hl=en" /><param name="FlashVars" value="playerMode=embedded" /><param name="wmode" value="transparent" /></object>
making sure that the bold bits in the original are in the new bit of code.
Hopefully no errors on a HTML validator now
Code tweaked from this post.
(Edit 05/12/09, you might also want to replace any &s with &)
Categories: Web Design
Hey Ryan,
Not every browser can make out your bold text, mister. Anyway, I have a few issues defining my CSS on my webby. Heather says you might know how to fix it.
Is it swearing to say dreamweaver? It’s annoying coz I KNOW this stuff. It’s just dreamweaver playing silly beggers.
19.05.2008 12:01
Thanks Ryan, that was a lifesaver…
Much obliged to you.
24.07.2008 17:42
Hi. This is a great help. However, when I run it, none of my videos are actually loading. Not sure if it has to do with the parameters or what. I’m using it with Expression Engine.
Any info would be appreciated. Thanks again.
D.
15.12.2008 17:15
Thanks a lot for that it has save me a big headake!!!
Cheers again, Jack…
09.06.2009 12:24
The W3C Validator for XHTML rejects the value= line because the ampersand is not shown as & But that would wreck the value parameter wouldn’t it?
How to get round XHTML validation?
David
P.S. Then someone could also tell YouTube!
05.08.2009 11:36
Worked well on my Joomla 1.5 website, thanks!
18.10.2009 18:06
@David Winch, you should get away with replacing & with &
05.12.2009 19:18
I would like to tell you`re right but I do not know who`s right. Try to check code validation on this link:
http://www.validome.org/xml/validate/
The code is not valid; please help me to understand ..
11.12.2009 17:41
@Greeny, I’m not sure what isn’t validating. If I test this page the only two errors are caused by this comment box due to a plugin. The youtube code passed fine.
12.12.2009 11:43
its ok now.. Thanks
A happy new year to you!
30.12.2009 14:40
Why is the ‘data’ attribute required?
17.04.2010 21:51
Thank you!
I am using moodle with my students and this was just great to embed a video lesson from youtube!
Thank you!
10.05.2010 21:19
Thank you so much for this it totally fixed the problem and was so easy too! You just saved me hours!
28.05.2010 18:20
Thanks Ryan,
I went from 13 Errors to 3 Errors 1 Warning… which IS an improvement… but not the answer for my project.
Seems rather odd this hasn’t been fixed considering Google owns YouTube now.
Oh well… onward McDuff!
Trish
08.11.2010 20:48
Great post! Thanks for the info
20.04.2012 10:41
This works and validates for ie but broken in firefox and chrome…yo…throw me a updated fix for this…
06.07.2012 16:10
Video is completely missing on Internet Explorer on my Nokia Lumia 710 Windows 7.5 smartphone.
04.01.2013 13:38