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

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

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

  3. The W3C Validator for XHTML rejects the value= line because the ampersand is not shown as &amp; 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!

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Human test: Enter Ryan backwards