Visit DynamiX Web Design! E-Mail DynamiX Web Design!

html: embedding a YouTube video using xtml strict code



If you’ve ever tried to add a YouTube video to your web site, you’ve probably found that it’s not too hard to do. But adding one that validates as XHTML Strict is just a little bit tougher. Let’s go step by step.

Step 1: Get the code.

YouTube has a very convenient “Embed” section on every video they host, which allows you to very easily get the code you need to post a video on your web site or blog. Unfortunately, the code they give you will throw XHTML validation errors.

Example YouTube Code:<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Pk7yqlTMvp8&rel=1"> </param><param name="wmode" value="transparent"> </param><embed src="http://www.youtube.com/v/Pk7yqlTMvp8&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

This code will work, but it will throw 15 errors (see our example page for a full list of errors). Now, how do we remedy this? Very simply.

Our Example Code:<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/Pk7yqlTMvp8"><param name="movie" value="http://www.youtube.com/v/Pk7yqlTMvp8" /></object>

This will work just as well as what YouTube provides, but with less code and with no validation errors. To make this code work for your video, simply replace the “Pk7yqlTMvp8″ in the code with the one provided by YouTube.

See it in action!



Want to see more about how we did this? Simply check out our example page! If you are interested in learning more about how to utilize YouTube in your business, please take a look at our sister article entitled A quick look: YouTube and what it could mean for your business

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

About Jeff Jahn:
Father, Husband, lover of life. Passionate about building exceptional products, platforms and ideas, and pushing the envelope on what can be achieved through technology. Bootstrapper, willing to radically shift direction if the need arises and always engaged.

Jeff is recognized as a leading authority in web, mobile, social media and emerging online technologies. One of 20 Rising Stars Under 40 (Cobb Life Magazine).

Twitter LinkedIn Google+ 

Tags: , ,

If you find our articles useful, "like" us!

Pass This Article On! Tiny Url: http://tinyurl.com/cpsvlo

11 Responses to “html: embedding a YouTube video using xtml strict code”

  1. EricNo Gravatar Says:

    Thats a pretty funny video!

  2. Uploaded site different from local site - Webforumz.com Says:

    Webforumz.com has linked to this article on their web site.

  3. Uploaded site different from local site - Page 2 - Webforumz.com Says:

    [...] Posted by frinkky Hmm, not embedded youtube videos before, but a quick Google found this Its all good practice thanks. that looks a lot more mentally digestible. i’ll check it out [...]

  4. JamesNo Gravatar Says:

    Good stuff! I was stumped on how to get my page valid in xhtml strict with a YouTube vid.

  5. DynamiXLabsNo Gravatar Says:

    Happy to help! Thanks for your kind comment.

  6. WhooNo Gravatar Says:

    Thanks! Works like a charm!

  7. Casa LagunaNo Gravatar Says:

    Excellent!
    Thank you a whole bunch!
    Also made a post with link-back to here on how I got it XHTML1.1 compliant. Hope you don’t mind that?

    As others, I’ve been breaking my head on how to get this fixed for months! I hate it when my site is not XHTML ok, only two pages that aren’t compliant now, but I can’t get them to, because those heavily rely on javascript functions which just will never get XHTML compliant.
    Unless anyone has an idea on how to fix them? (Just run the test on my page ;) )

  8. CindyNo Gravatar Says:

    Thank you for posting this article and keeping it up! I like James was having a problem getting my page to validate. This works with almost any URL (I used linked flash files), I have used it on 3, thank you again

  9. Lyn Says:

    Very helpful, thanks, Video websites are all over the place now.

  10. JimmiemNo Gravatar Says:

    Great work, thanks for publishing this! Do you have sample code to do the same with a YouTube embedded video player/playlist?

  11. DynamiXLabsNo Gravatar Says:

    Hi Casa,

    Of course we don’t mind! But thank you for checking :-) Link us to the pages that don’t validate and we’ll take a look. Cindy, I am glad that this method is working for you! And Jimmiem, if you will paste in an example of what you are looking to validate, we would be more than happy to create an article for you on how to do this.






DynamiX Web Design

DynamiX Labs is Copyright © 2014 DynamiX Web Design, LLC.
DynamiX Labs is proudly powered by WordPress

Entries & Comments.  |  thanks & about.


The DynamiX Mascot button submit it! Background
hire dynamix!