Youtube and embedding correctly

For 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 &amp)

18 thoughts on “Youtube and embedding correctly”

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.

Thanks Ryan, that was a lifesaver…

Much obliged to you.

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.

Thanks a lot for that it has save me a big headake!!!

Cheers again, Jack…

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!

Worked well on my Joomla 1.5 website, thanks!

@David Winch, you should get away with replacing & with &

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

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