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.


About C.K. Sample III

I am a father, a husband, a blogger, a parrot owner, a pug owner, and the EVP of Technology & Development for Chaotic Moon. This site has no comments. If you want to talk to me, send me an @cksample on Twitter. If you like this post, feel free to become a patron or buy me something off of my wishlist.
This entry was posted in Blogging and tagged , , , . Bookmark the permalink.

120 Responses to How to embed YouTube and Google Video without breaking validation!

  1. Blargg says:

    Works great. Thanks.

  2. Pingback: tech.no.philia | random musings, but mostly on technology » Blog Archive » The Two Easiest Ways to Embed Videos in WordPress

  3. Pingback: Random Insights » Blog Archive » links for 2006-09-23

  4. Amy Stephen says:

    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! :)

  5. Pingback: Embedding Video without XHTML Transitional Validation Errors at Amy Stephen

  6. Hilde says:

    Great! Thanks a lot!

  7. Pingback: Murdoc Online

  8. Pingback: Michiblogger

  9. Nix says:

    Thank you very much!

  10. Ferguson says:

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

  11. Pingback: After the Net » Blog Archive » links for 2006-12-23

  12. meeciteewurkor says:

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

  13. TBL says:

    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

  14. motherduce says:

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

  15. Al says:

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

  16. Pingback: eternos.org

  17. L. Gariépy says:

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

  18. arakno says:

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

  19. arakno says:

    eskeci de deixar o link pro meu blog…

  20. Shaina says:

    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!

  21. Pingback: Adding Youtube or Google Video to Blogs at Bee Hive

  22. Pingback: tenthofjune

  23. TenthOfMarch says:

    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!

  24. Pingback: TenthOfMarch.com » Blog Archive » Sucker For Perfection

  25. Pingback: TenthOfMarch.com » Blog Archive » Tutorial: How to embed flash video in your blog without breaking validation

  26. Pingback: Sample the Web — Someone wrote up a step by step tutorial…

  27. vijaianand says:

    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

  28. Tyler Regas says:

    Works great. Gracias!

  29. dna says:

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

    http://basilar.net

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

  31. Pingback: Блокнот » как красиво встроить YouTube видео в сайт

  32. Vernon says:

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

  33. Pingback: Tom Cobbaert .eu » Validation

  34. glenneroo says:

    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

  35. c.k. says:

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

  36. glenneroo says:

    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

  37. Pingback: Nida in the parra » Blog Archive » Validando el código de YouTube

  38. drekwon says:

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

    Thanx man

  39. Trimidium says:

    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

  40. JoeLiTo says:

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

  41. Wes Linda says:

    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?

  42. Jesus says:

    Thank u very much guy!

  43. Christopher Davis says:

    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

  44. deviantz says:

    Nice, Thank you!

    Deviantz – http://www.iCzalazar.com

  45. billc says:

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

  46. Pingback: Capitano Uncino » Archivio Blog » Validare il codice di YouTube e simili

  47. Pingback: Jake Kasprzak Online › Link to YouTube Video Pages from Embedded YouTube Videos

  48. Pingback: XHtml Doğrulamasından Geçebilen Youtube Embed Kodu | Açık kaynak ve kişisel tecrübeler

  49. lee says:

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

  50. Pingback: YouTube Kodları XHTML Doğrulamasından Geçsin - Teknobaz

  51. kelvin says:

    Great, it’s what I looking for,Thx

    http://www.digitalframe0.com

  52. Pingback: Embeding YouTube and Google Video without breaking validation « The Official MartinZ Blog

  53. Pingback: How to embed Blip.tv videos without breaking validation!

  54. Lolita Loco says:

    Big thank you! =)

  55. Pingback: Make It Up As You Go » Blog Archive » How to Embed YouTube and Google Video with Valid Code

  56. Jazzo says:

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

    Hope this helps too :)

  57. Pingback: YouTube & WordPress ist auch eine Zumutung at blog.gauner.org

  58. Pingback: YouTube Enabled? : a8le.com

  59. Worked perfectly, thanks!

  60. Pingback: Where does my time go? | lifepassedby.com | Starting again

  61. Pingback: How to embed YouTube videos directly into your webpage without breaking validation

  62. steveking says:

    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

  63. Dizi says:

    i was looking for this thank you.

  64. great codes thanks

  65. jane doe says:

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

  66. jane doe says:

    PS of course use (without spaces):

    & amp;

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

  67. state shirt says:

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

  68. James Young says:

    Works here. Thank you.

  69. James Young says:

    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

  70. Pingback: Embedding YouTube and Google Videos Without Breaking Validation Revisited | Sample the Web

  71. dizi izle says:

    thank you man

  72. hey, great work, thanks

  73. Rob C says:

    Thanks for the quick fix.

  74. bearshare says:

    thanks, great work

  75. oyun says:

    thanks alot

  76. oyunlar says:

    merhaba ho? geldiniz te?ekkürler

  77. oyun says:

    Thanks so much.

  78. toner says:

    Thanks a lot.

  79. kartu? says:

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

  80. aljuk says:

    OMFG! Thankyou SO much!

  81. Thomas says:

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

  82. c.k. says:

    Thomas,

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

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

  84. hikaye says:

    Yes Thats is a good idea

  85. Dizi izle says:

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

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

  87. Tony Oravet says:

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

  88. hdtv antenna says:

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

  89. sohbet says:

    Thank you
    sohbet

  90. sohbet says:

    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.

  91. film izle says:

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

  92. Joe says:

    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.

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

  94. Ed says:

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

  95. Dan says:

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

    Thanks!

  96. Vesko says:

    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

  97. Guillaume says:

    this is the you tube valid embedding code

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

  99. thank grice nice

  100. hdtv antenna says:

    Everything seems to be working just fine!

  101. kualahoo says:

    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?!

  102. tony says:

    thanks for that info m really good

  103. loyal fan says:

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

  104. Israel says:

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

    Thanks helena.

  105. Pingback: YouTube Embed with Valid W3C Markup | Articles and Tutorials

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

  107. Kagero says:

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

  108. Joseph says:

    Awesome! Thanks!

  109. Radi says:

    Full screen dosen’t work =(

Comments are closed.