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.


Advertisements

120 thoughts on “How to embed YouTube and Google Video without breaking validation!”

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

  2. Pingback: Murdoc Online
  3. Pingback: Michiblogger
  4. 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!).

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

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

  7. Pingback: eternos.org
  8. Great! you solved my problem, and it does not work only for Netscape but for IE too!
    Thanks!

  9. Pingback: tenthofjune
  10. 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!

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

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

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

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

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

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

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

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

    Hope this helps too :)

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

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

  21. PS of course use (without spaces):

    & amp;

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

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

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

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

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

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

    Thanks!

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

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

Comments are closed.