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.
Recommend on Mahalo
September 11th, 2006 at 2:52 am
Works great. Thanks.
September 11th, 2006 at 3:51 pm
http://www.virtualvideomap.com
September 20th, 2006 at 1:39 pm
[...] If you are for some reasons against installing a plugin, and yet want to embed YouTube and Google Video in your blog, you can try this following code as recommended by C.K. Sample III in his blog: [...]
September 23rd, 2006 at 8:23 am
[...] Sample the Web — How to embed YouTube and Google Video without breaking validation! So, here’s the code for either one: (tags: GoogleVideo Wordpress XHTML embed YouTube standards Internet web2.0) [...]
October 29th, 2006 at 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!
October 29th, 2006 at 11:52 pm
[...] SampletheWeb is the one who gave me the answer - simply. I thank you. You rock! [...]
November 6th, 2006 at 11:04 am
Great! Thanks a lot!
November 13th, 2006 at 1:49 pm
Murdoc’s FurnaceCam…
How people were able to survive before high-speed internet, Murdoc can’t figure…….
November 13th, 2006 at 1:53 pm
Valid YouTube Format…
EMBEDDED YOUTUBE PLAYERS built the easy way using the handy code on the YouTube are actually invalid HTML. If you care about building valid web pages, try this solution. Worked great for the Patrick Stewart video player below. Also, MichiBlogger……
November 15th, 2006 at 2:57 pm
Thank you very much!
December 5th, 2006 at 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!).
December 27th, 2006 at 6:26 am
[...] How to embed YouTube and Google Video without breaking validation! (tags: blogging google howto videos W3C web2.0 webdev website wordpress xhtml youtube) [...]
January 15th, 2007 at 12:32 am
groovy. Killed 8 validation errors I was trying to get rid of.
January 15th, 2007 at 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
January 16th, 2007 at 3:11 pm
Yup, not working for me in FF either. Any ideas?
January 19th, 2007 at 5:39 am
Works fine for me in FF 1.5 and FF 2.0 - Embedding Google Video clip. Using Flash Player 9.
Al
February 7th, 2007 at 3:50 pm
YouTube vs XHTML…
Seria lógico pensar que um site tão famoso como o YouTube, fosse um exemplo de perfeição e cuidado na estruturação no código do seu webite. Mas não é…
Tudo bem, cada qual sabe de si, e compreendo que num site com aquela…
February 23rd, 2007 at 3:13 pm
Great! you solved my problem, and it does not work only for Netscape but for IE too!
Thanks!
February 23rd, 2007 at 4:55 pm
Dude, you saved my blog from breaking apart! :’)
Thanks a lot!!
February 23rd, 2007 at 4:56 pm
eskeci de deixar o link pro meu blog…
February 28th, 2007 at 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!
March 2nd, 2007 at 8:07 pm
[...] Success!!! I love that word, after attempting for a few days to get video’s working on the blog I finally found the information that I needed on a site called Sample the Web. [...]
March 9th, 2007 at 4:47 am
Embedding a Google or Youtube Video without breaking validation…
If you use the code on Google Video or Youtube to embed a video on your website, they give you the now defunct embed tag which breaks the HTML validation. You can however get around this using the method on CK Samples blog.
……
March 9th, 2007 at 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!
March 9th, 2007 at 11:36 am
[...] glass? I wasn’t going to give up that easily. I went to google for a solution and found C.K. Sample III. Thanks to him, my site is 100% valid once [...]
March 10th, 2007 at 10:26 am
[...] to that problem. This tutorial is possible thanks to C.K. Sample III who has provided a nicely modified code to replace the default codes given by those [...]
March 10th, 2007 at 10:31 am
[...] of my how to embed Google Video / YouTube without breaking validation post. Check it out here. Share and Enjoy (Netscape is at the top of the post):These icons link to [...]
March 16th, 2007 at 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
March 20th, 2007 at 1:59 pm
Works great. Gracias!
March 28th, 2007 at 2:50 am
cool stuff, works like a charm. thanks for sharing.
http://basilar.net
March 29th, 2007 at 10:08 pm
April 8th, 2007 at 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 ^^
April 11th, 2007 at 8:21 am
[...] Возможно, тип будет кому-то полезным. Оригинально взят здесь. [...]
April 13th, 2007 at 6:07 pm
Thanks, just used it for my site and it works great!
May 10th, 2007 at 7:15 am
[...] er op aan te komen te kiezen tussen Europa en W3C, maar toen kwam de deus ex machina: “How te embed YouTube and Google Video without breaking validation“. Deze mens zorgde ervoor dat iedere Zeldman-getrouwe nu zonder enig gewetensbezwaar filmpjes [...]
May 16th, 2007 at 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
May 16th, 2007 at 12:18 pm
Make sure you use the URL in YouTube’s embed code, NOT the videos URL.
May 16th, 2007 at 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
May 20th, 2007 at 2:03 pm
[...] Hoy he “Googleado” un poco y he encontrado una solución que a mí al menos me ha funcionado (How to embed YouTube and Google Video without breaking validation!). [...]
May 28th, 2007 at 11:49 am
Super! I had the same problem but that did the work!
Thanx man
May 28th, 2007 at 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
June 9th, 2007 at 2:27 am
Thanks for that. Your method validates in XHTML 1.1 and that’s the one I needed.
August 7th, 2007 at 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?
August 9th, 2007 at 10:48 am
Thank u very much guy!
August 11th, 2007 at 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
August 14th, 2007 at 12:19 am
Nice, Thank you!
Deviantz - http://www.iCzalazar.com
September 12th, 2007 at 10:59 am
September 12th, 2007 at 10:59 am
http://www.youtube.com/v/HpwtQiHZI2E
September 15th, 2007 at 2:13 am
Bummer that the video controls don’t work though. Would be nice to be able to pause.
September 25th, 2007 at 8:18 pm
[...] li si vada a prendere?Ebbene, la soluzione forse migliore è quella suggerita in questa pagina di Sample The Web.In pratica, si procede in questo modo: invece di inserire nel vostro post il codice fornitovi dal [...]
September 30th, 2007 at 5:02 pm
[...] always get embedded in web pages the way it is suggested on the pages for YouTube videos. In fact, if you click here or here you’ll see that the use of the <embed> tag may not always be used in embedding [...]
October 21st, 2007 at 5:08 am
[...] bakın! Eh ne yapalım iş başa düştü o zaman doğru kodu arayıp bulmamız lazım. İşte şurada tam aradığımız şeyi buluyoruz. peki kodumuz nasıl bir şeye [...]
October 25th, 2007 at 3:51 am
hey, this works great, thanks for helping the web with your work
November 4th, 2007 at 7:57 pm
[...] [geldik.biz] XHtml Doğrulamasından Geçebilen Youtube Embed Kodu [Sample the Web] How to embed YouTube and Google Video without breaking validation! [...]
November 7th, 2007 at 12:18 am
Great, it’s what I looking for,Thx
http://www.digitalframe0.com
November 18th, 2007 at 11:27 am
[...] Mon, 19 Nov 07, 12:27 am Try this out from Sample the Web. [...]
December 2nd, 2007 at 4:28 pm
[...] Related: How to Embed YouTube and Google Video without Breaking Validation! [...]
January 7th, 2008 at 1:59 pm
Big thank you! =)
January 11th, 2008 at 12:02 pm
[...] Sample the Web has an easy method for embedding YouTube or Google Videos without breaking validation. (via Design Canopy) [...]
January 18th, 2008 at 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
January 18th, 2008 at 4:45 pm
February 15th, 2008 at 9:32 am
[...] Glück gibts hier einen Hinweis wie man das Layout rettet. <object type=”application/x-shockwave-flash” [...]
February 16th, 2008 at 12:48 pm
[...] thoughts using YouTube videos. The code wasn’t hard and thanks to C.K. Sample’s blog (here), it was even [...]
March 2nd, 2008 at 7:22 pm
Worked perfectly, thanks!
March 5th, 2008 at 12:00 am
[...] anyone else has had this same issue and whether or not they were able to fix it. With the help of this site I found exactly what I was looking for and was able to fix the validation error. I was able to [...]
March 6th, 2008 at 10:55 pm
[...] thanks to C.K. Sample III [...]
March 18th, 2008 at 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
March 19th, 2008 at 8:45 am
i was looking for this thank you.
March 19th, 2008 at 8:45 am
great codes thanks
March 25th, 2008 at 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.)
March 25th, 2008 at 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.
April 8th, 2008 at 6:31 pm
hey thanks a bunch. this is exactly what I was looking for. now my site doesn’t break IE.
April 9th, 2008 at 5:28 pm
Works here. Thank you.
April 9th, 2008 at 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
May 10th, 2008 at 11:27 am
thanks…
May 10th, 2008 at 10:45 pm
[...] of the most popular posts I’ve ever done is my How to Embed YouTube and Google Video Without Breaking Validation post, and this morning, I spotted a new, helpful inbound link to it: YouTube and embedding [...]
May 20th, 2008 at 4:15 am
thank you man
May 31st, 2008 at 1:47 am
hey, great work, thanks
June 28th, 2008 at 3:07 am
Thanks for the quick fix.
July 3rd, 2008 at 7:42 am
thanks for fix