≡ Menu

How to embed YouTube and Google Video without breaking validation!

So, here’s the code for either one:

<object type="application/x-shockwave-flash" data="[INSERT VIDEO URL FROM EMBED CODE PROVIDED HERE]" width="400" height="326"><param name="movie" value="[INSERT VIDEO URL FROM EMBED CODE PROVIDED HERE]" /><param name="FlashVars" value="playerMode=embedded" /></object>

Took a while to figure out, but it works. I originally tried the code mentioned in this article, but it kept breaking my site, so I trimmed it all down to the bare essentials. This works for me and my template. Let me know if it does / doesn’t work for yours in the comments. w00t!

UPDATE: Great post from Ryan over at Hapless band of staff and regulars, where he tweaks my code slightly to avoid YouTube upscaling of the video. Check it out.


Comments on this entry are closed.

  • Blargg 9/11/2006, 2:52 am

    Works great. Thanks.

  • Virtual Magic 9/11/2006, 3:51 pm
  • Amy Stephen 10/29/2006, 11:50 pm

    Your work was a GREAT help for me today and stopped me from stepping in front of a train. Perhaps you could write for A List Apart. How can they make it so complicated — and yet, still not work!

    Honestly, thanks a ton, dude! :)

  • Hilde 11/6/2006, 11:04 am

    Great! Thanks a lot!

  • Nix 11/15/2006, 2:57 pm

    Thank you very much!

  • Ferguson 12/5/2006, 3:06 pm

    I’m new about this “blog-video-stuff”.
    An example? I really don’t understand how to put this in the Wordpress template.

    Thank you and excuse my english (really sucks!).

  • meeciteewurkor 1/15/2007, 12:32 am

    groovy. Killed 8 validation errors I was trying to get rid of.

  • TBL 1/15/2007, 1:10 pm

    Is there anyway to get this code to work with firefox too? It works great with IE but does not show up with FF (at least not on my machines)

    thanks

  • motherduce 1/16/2007, 3:11 pm

    Yup, not working for me in FF either. Any ideas?

  • Al 1/19/2007, 5:39 am

    Works fine for me in FF 1.5 and FF 2.0 – Embedding Google Video clip. Using Flash Player 9.
    Al

  • L. Gariépy 2/23/2007, 3:13 pm

    Great! you solved my problem, and it does not work only for Netscape but for IE too!
    Thanks!

  • arakno 2/23/2007, 4:55 pm

    Dude, you saved my blog from breaking apart! :’)
    Thanks a lot!!

  • arakno 2/23/2007, 4:56 pm

    eskeci de deixar o link pro meu blog…

  • Shaina 2/28/2007, 9:17 am

    This page will help you to convert youtube’s code into a valid XHTML.

    http://www.gl3nnx.net/valid-xhtml-youtube.php

    No Sweat! instant valid XHTML!

  • TenthOfMarch 3/9/2007, 9:09 am

    Just want to inform that the codings provided by c.k. works for metacafe videos as well. Just replace the embedded video’s url into his codings. I haven’t tried it with other video sites, but I think it should work for those as well. Thanks for the codings!

  • vijaianand 3/16/2007, 11:30 am

    I still don’t see my embedded youtube video in my blog. I see it my other machines and not in my laptop. I reinstalled Flash plugin and still not working.. Help me here..

    Thanks
    VIJAI

  • Tyler Regas 3/20/2007, 1:59 pm

    Works great. Gracias!

  • dna 3/28/2007, 2:50 am

    cool stuff, works like a charm. thanks for sharing.

    http://basilar.net

  • haha 3/29/2007, 10:08 pm
  • Guillaume Sahut 4/8/2007, 11:35 pm

    F*ckin Hell! Yur a GOD!!!
    I’m tryin to find a way to display these goddam vidz without breaking the W3C Validation for hours…

    ThanXX A LAAAAAATTT ^^

  • Vernon 4/13/2007, 6:07 pm

    Thanks, just used it for my site and it works great!

  • glenneroo 5/16/2007, 12:16 pm

    hmm well got rid of all the validation errors, but all i see is a white box which isn’t clickable or anything. I’m using Firefox 2.0.0.3

  • c.k. 5/16/2007, 12:18 pm

    Make sure you use the URL in YouTube’s embed code, NOT the videos URL.

  • glenneroo 5/16/2007, 12:19 pm

    ah ok well the link someone above posted here works:
    http://www.gl3nnx.net/valid-xhtml-youtube.php

    but it leaves a white border on top/bottom and to the right one pixel, so change width to 424px and height to 336px

  • drekwon 5/28/2007, 11:49 am

    Super! I had the same problem but that did the work!

    Thanx man

  • Trimidium 5/28/2007, 7:25 pm

    What blows my mind is the fact that all of those services offer embeding as a service, but don’t make it valid code when they easilly can.

    Thanks,
    http://www.thesmartass.info

  • JoeLiTo 6/9/2007, 2:27 am

    Thanks for that. Your method validates in XHTML 1.1 and that’s the one I needed.

  • Wes Linda 8/7/2007, 6:36 pm

    Great tip, works cleanly, easy to understand, and I agree with many of the comments above. Why does everyone have to make it so hard?

  • Jesus 8/9/2007, 10:48 am

    Thank u very much guy!

  • Christopher Davis 8/11/2007, 7:09 am

    Thank you for this code! I wonder why Google doesn’t use it?
    One thing I had to do however…
    I was getting 5 validation errors when I first used your code. When I took out the &hl=en from the end of the docId code, it passes completely…

    I suppose that stands for home language = English ? probably used by Google to filter your language results but not necessary to play when embedding.

    Chris Davis
    http://www.chrisdavistech.com

  • deviantz 8/14/2007, 12:19 am

    Nice, Thank you!

    Deviantz – http://www.iCzalazar.com

  • asdsd 9/12/2007, 10:59 am
  • asdsd 9/12/2007, 10:59 am
  • billc 9/15/2007, 2:13 am

    Bummer that the video controls don’t work though. Would be nice to be able to pause.

  • lee 10/25/2007, 3:51 am

    hey, this works great, thanks for helping the web with your work

  • kelvin 11/7/2007, 12:18 am

    Great, it’s what I looking for,Thx

    http://www.digitalframe0.com

  • Lolita Loco 1/7/2008, 1:59 pm

    Big thank you! =)

  • Jazzo 1/18/2008, 4:43 pm

    Thank you, this worked great. I also used it to help me embed myspace videoa without breaking validation:

    Hope this helps too :)

  • Jazzo 1/18/2008, 4:45 pm
  • Eric Amundson 3/2/2008, 7:22 pm

    Worked perfectly, thanks!

  • steveking 3/18/2008, 12:28 am

    YouTubeRobot.com today announces YouTube Robot 2.0, a tool that enables you to download video from YouTube.com onto your PC, convert it to various formats to watch it when you are on the road on mobile devices like mobile phone, iPod, iPhone, Pocket PC, PSP, or Zune.

    YouTube Robot allows you to search for videos using keywords or browse video by category, author, channel, language, tags, etc. When you find something noteworthy, you can preview the video right in YouTube Robot and then download it onto the hard disk drive. The speed, at which you will be downloading, is very high: up to 5 times faster than other software when you download a single file and up to 4 times faster when you download multiple files at a time.

    Manual download is not the only option with YouTube Robot. You may as well schedule the download and conversion tasks to be executed automatically, even when you are not around. Downloading is followed by conversion to the format of your choice and uploading videos to a mobile device (if needed). For example, you can plug in iPod, select the video, go to bed, and when you wake up next morning, your iPod will be ready to play new YouTube videos.

    Product page: http://www.youtuberobot.com
    Direct download link: http://www.youtuberobot.com/download/utuberobot.exe
    Company web-site: http://www.youtuberobot.com
    E-mail: support@youtuberobot.com

  • Dizi 3/19/2008, 8:45 am

    i was looking for this thank you.

  • Firma Rehberi 3/19/2008, 8:45 am

    great codes thanks

  • jane doe 3/25/2008, 11:47 am

    found your blog which definitely helped me in getting code to validate (thanks!) … one thing to add, for embedding hulu videos where specific clips are chosen from a longer video there: in the code hulu will give, part of it will have something like “st=400&et=550” (st being “start time” and et being “end time” — numbers here are just examples). With your validating code, you’d take the start/end code and add it to this part:

    <param name="FlashVars" value="playerMode=embedded" />

    so that it would look similar to this:

    <param name="FlashVars" value="st=1022&et=1157&playerMode=embedded" />

    (Again, the numbers are examples only; one would use whatever numbers are in the embed code hulu gives for the particular clip chosen.)

  • jane doe 3/25/2008, 11:52 am

    PS of course use (without spaces):

    & amp;

    in place of just & in the code … that part didn’t come through right in the example.

  • state shirt 4/8/2008, 6:31 pm

    hey thanks a bunch. this is exactly what I was looking for. now my site doesn’t break IE.

  • James Young 4/9/2008, 5:28 pm

    Works here. Thank you.

  • James Young 4/9/2008, 5:47 pm

    Wordpress users: this is a plugin that embeds all of the current media today without breaking validation!
    http://wordpress.org/extend/plugins/video-embedder/#post-5127

  • youtube 5/10/2008, 11:27 am

    thanks…

  • dizi izle 5/20/2008, 4:15 am

    thank you man

  • PhotoFiltre Studio 5/31/2008, 1:47 am

    hey, great work, thanks

  • Rob C 6/28/2008, 3:07 am

    Thanks for the quick fix.

  • çocuk oyunları 7/3/2008, 7:42 am

    thanks for fix

  • bearshare 7/9/2008, 3:30 am

    thanks, great work

  • oyun 7/15/2008, 4:57 am

    thanks alot

  • oyunlar 7/15/2008, 4:58 am

    merhaba ho? geldiniz te?ekkürler

  • kral oyun 7/15/2008, 4:59 am

    thanks

  • oyun 7/26/2008, 2:10 pm

    Thanks so much.

  • toner 8/3/2008, 5:08 pm

    Thanks a lot.

  • 3rbsc.com 8/8/2008, 8:04 pm

    thx alot

  • kartu? 8/11/2008, 6:14 pm

    Thanks for that. Your method validates in XHTML 1.1 and that’s the one I needed.

  • aljuk 8/25/2008, 2:53 pm

    OMFG! Thankyou SO much!

  • Thomas 8/30/2008, 11:54 pm

    will google adsense ban me if i paste youtube videos in my site?

  • c.k. 9/4/2008, 5:18 am

    Thomas,

    No. YouTube is owned by Google, so it’s all good.

  • North Cyprus Holiday 9/26/2008, 4:00 pm

    Your web site is really nice if we think the others
    I think you had worked about that web site, hardly.
    Like I see. Thank you for information tht i get.

  • hikaye 9/27/2008, 10:56 am

    Yes Thats is a good idea

  • diyet 10/2/2008, 4:03 am

    ty

  • Dizi izle 10/19/2008, 5:50 am

    No. YouTube is owned by Google, so it’s all good.

  • simon bullock 11/6/2008, 2:39 am

    Another awesome way to embed video is to use VideoSwiper a web 2.0 online application that can mass populate your websites and wordpress blogs with niche targeted video content. The application also allows you to edit the embed codes title, description and tags before posting it to your website to keep the content unique.

    http://www.videoswiper.com

  • Tony Oravet 11/7/2008, 7:42 am

    This worked great! Thanks so much! IE can be such a pain sometimes!

  • hdtv antenna 11/11/2008, 4:12 pm

    For some reason I have the hardest time ever when dealing with this type of code. Still learning though!
    Thanks for the article

  • sohbet 11/11/2008, 7:20 pm

    Thank you
    sohbet

  • sohbet 11/11/2008, 7:21 pm

    Another awesome way to embed video is to use VideoSwiper a web 2.0 online application that can mass populate your websites and wordpress blogs with niche targeted video content. The application also allows you to edit the embed codes title, description and tags before posting it to your website to keep the content unique.

  • film izle 11/21/2008, 7:19 pm

    I had the same problem but that did the work! great.

  • Joe 11/23/2008, 6:41 am

    Thanks a lot I’ve been trying to get this to work on an script it was able to remove all errors except one.

    Duplicate specification of attribute “class”.

    …alue=”” size=”22″ tabindex=”1″ class=”styled” />

    You have specified an attribute more than once. Example: Using the “height” attribute twice on the same “img” tag.

  • water damage repair 11/23/2008, 5:05 pm

    I had no idea that you could break validation with a youtube embed. I sure am glad that I ran across this. I guess I need to spend more time in this blog!

    Thanks,
    Really!

  • Ed 12/19/2008, 5:51 am

    Brilliant, cheers mate! time for a mass embedded vid editing session!

  • trkelebeknet 1/4/2009, 4:13 am
  • Dan 1/6/2009, 8:33 pm

    Hi, I tried this in Google groups and it strips the code – should this work in Groups, or only Google pages?

    Thanks!

  • Vesko 1/8/2009, 3:48 am

    Thanks guys for your hard work. I've tried Ryans' code. It works with IE, Firefox, Opera. Can you please, tell me other browsers about…Finaly I fixed that mess. Here it is at http://www.jewelry-engraver.com

  • Guillaume 1/16/2009, 1:25 pm

    this is the you tube valid embedding code

  • Parrot Videos 1/23/2009, 2:08 pm

    I also though all the coding to embed videos is a little excessive, alot of the tags are repeated and not needed

  • türk pornosu 3/16/2009, 6:32 am

    thank grice nice

  • hdtv antenna 3/29/2009, 6:11 pm

    Everything seems to be working just fine!

  • kualahoo 4/20/2009, 11:55 pm

    I don't see the reason why you have to go through that. The embed code is good enough.
    what''s new with this code? am I missing something?!

  • tony 4/27/2009, 4:57 pm

    thanks for that info m really good

  • loyal fan 4/29/2009, 6:55 am

    I go along with everything you say. Which was? Huh?

  • Israel 5/11/2009, 11:48 am

    Can you plaese give a valid xhtml with full screen option?

    Thanks helena.

  • Venice Carnival 10/26/2009, 12:03 am

    Thanks mate, works like a charm. I was searching to solve this for a while !

  • Kagero 10/27/2009, 8:35 pm

    Thank you very much! It works perfectly!
    “This document was successfully checked as XHTML 1.0 Strict!” : YESS

  • Joseph 2/13/2010, 7:51 pm

    Awesome! Thanks!

  • Radi 4/11/2010, 8:15 pm

    Full screen dosen’t work =(