Results 1 to 6 of 6

Thread: Embed YouTube Videos with W3C Compliance

  1. #1
    Will.Spencer's Avatar
    Will.Spencer is offline Retired
    Join Date
    Dec 2008
    Posts
    5,033
    Blog Entries
    1
    Thanks
    1,010
    Thanked 2,329 Times in 1,259 Posts

    Embed YouTube Videos with W3C Compliance

    If you copy the code to embed a video from YouTube, you get something like this:
    Code:
    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
    When I placed that code into an HTML401 Transitional web page, I received sixteen validation errors from The W3C HTML Validator:
    Code:
    #  Line 9, Column 97: cannot generate system identifier for general entity "hl" .
    
    …http://www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFu
    
    An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
    
    Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.
    
    If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
    
    Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
    
    # Error Line 9, Column 97: general entity "hl" not defined and no default entity .
    
    …http://www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFu
    
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
    
    # Error Line 9, Column 99: reference to entity "hl" for which no system identifier could be generated .
    
    …tp://www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFull
    
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
    
    # Info Line 9, Column 96: entity was defined here .
    
    …"http://www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowF
    
    # Warning Line 9, Column 103: cannot generate system identifier for general entity "fs" .
    
    …/www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFullScre
    
    An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
    
    Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.
    
    If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
    
    Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
    # Error Line 9, Column 103: general entity "fs" not defined and no default entity .
    
    …/www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFullScre
    
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
    
    # Error Line 9, Column 105: reference to entity "fs" for which no system identifier could be generated .
    
    …ww.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFullScreen
    
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
    
    # Info Line 9, Column 102: entity was defined here .
    
    …//www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFullScr
    
    # Error Line 9, Column 116: end tag for element "PARAM" which is not open .
    
    …com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFullScreen" value="tr
    
    The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
    
    If this error occurred in a script section of your document, you should probably read this FAQ entry.
    
    # Error Line 9, Column 167: end tag for element "PARAM" which is not open .
    
    …allowFullScreen" value="true"></param><param name="allowscriptaccess" value="
    
    The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
    
    If this error occurred in a script section of your document, you should probably read this FAQ entry.
    
    # Error Line 9, Column 222: end tag for element "PARAM" which is not open .
    
    …wscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/uZ
    
    The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
    
    If this error occurred in a script section of your document, you should probably read this FAQ entry.
    
    # Error Line 9, Column 234: there is no attribute "SRC" .
    
    …s" value="always"></param><embed src="http://www.youtube.com/v/uZPN-xpkaao&hl
    
    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
    
    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
    
    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    
    # Error Line 9, Column 274: reference to entity "hl" for which no system identifier could be generated .
    
    …tp://www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1" type="application/x-shockwave-
    
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
    
    # Info Line 9, Column 96: entity was defined here .
    
    …"http://www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowF
    
    # Error Line 9, Column 280: reference to entity "fs" for which no system identifier could be generated .
    
    …ww.youtube.com/v/uZPN-xpkaao&hl=en&fs=1" type="application/x-shockwave-flash"
    
    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
    
    # Info Line 9, Column 102: entity was defined here .
    
    …//www.youtube.com/v/uZPN-xpkaao&hl=en&fs=1"></param><param name="allowFullScr
    
    # Error Line 9, Column 289: there is no attribute "TYPE" .
    
    …e.com/v/uZPN-xpkaao&hl=en&fs=1" type="application/x-shockwave-flash" allowscr
    
    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
    
    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
    
    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    
    # Error Line 9, Column 339: there is no attribute "ALLOWSCRIPTACCESS" .
    
    …x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="4
    
    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
    
    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
    
    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    
    # Error Line 9, Column 364: there is no attribute "ALLOWFULLSCREEN" .
    
    …criptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
    
    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
    
    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
    
    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    
    # Error Line 9, Column 377: there is no attribute "WIDTH" .
    
    …always" allowfullscreen="true" width="425" height="344"></embed></object>
    
    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
    
    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
    
    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    
    # Error Line 9, Column 390: there is no attribute "HEIGHT" .
    
    …fullscreen="true" width="425" height="344"></embed></object>
    
    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
    
    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
    
    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    
    # Error Line 9, Column 395: element "EMBED" undefined .
    
    …creen="true" width="425" height="344"></embed></object>
    
    You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
    
        * incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
        * by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
        * by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
    That's pretty damned sloppy.

    Here's some clean HTML to embed the same YouTube video which received zero error messages from W3C in my HTML 4.01 Transitional document:
    Code:
    <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/uZPN-xpkaao" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/uZPN-xpkaao"><param na
    me="FlashVars" value="playerMode=embedded"><param name="wmode" value="transparent"></object>
    Just copy this code and replace uZPN-xpkaao with the YouTube identifier for your own video.
    Submit Your Webmaster Related Sites to the NB Directory
    I swear, by my life and my love of it, that I will never live for the sake of another man, nor ask another man to live for mine.

  2. Thanked by:

    Aquarezz (21 January, 2009), Aziz (30 July, 2010), Charles (21 January, 2009), jakki (2 August, 2010), Shenron (21 January, 2009), TopDogger (31 July, 2010)

  3. #2
    Aquarezz's Avatar
    Aquarezz is offline Master Net Builder
    Join Date
    Dec 2008
    Location
    Belgium
    Posts
    3,853
    Blog Entries
    4
    Thanks
    683
    Thanked 591 Times in 463 Posts
    Wow that's great, pretty bad Youtube never changed it :s
    Maybe they need to see this thread

    Greetz
    |Nico Lawsons

  4. #3
    mgmuranaka is offline Unknown Net Builder
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm really confused. I have 2 sites that pass HTML 4.01with no problems, but this site I am working on does not comply. I was using HTML 4.01 but then I switched to XHTML 1.0 strict. I still get the same errors. I have used the aforementioned code for the first 2 sites that passed, yet I cannot get this site to comply. Am I crazy?

    [Invalid] Markup Validation of http://cheridahbest.com/ - W3C Markup Validator

  5. #4
    Will.Spencer's Avatar
    Will.Spencer is offline Retired
    Join Date
    Dec 2008
    Posts
    5,033
    Blog Entries
    1
    Thanks
    1,010
    Thanked 2,329 Times in 1,259 Posts
    Quote Originally Posted by mgmuranaka View Post
    I'm really confused. I have 2 sites that pass HTML 4.01with no problems, but this site I am working on does not comply. I was using HTML 4.01 but then I switched to XHTML 1.0 strict. I still get the same errors. I have used the aforementioned code for the first 2 sites that passed, yet I cannot get this site to comply. Am I crazy?

    [Invalid] Markup Validation of http://cheridahbest.com/ - W3C Markup Validator
    You're not using the embedding code I posted. This is OK, but it means that if you want to achieve W3C compliance you will have to debug the code you are using.

    That really just means going through each error listed by the validator, making the suggested changes, and noting the effects (if any) on the output of the page.
    Submit Your Webmaster Related Sites to the NB Directory
    I swear, by my life and my love of it, that I will never live for the sake of another man, nor ask another man to live for mine.

  6. #5
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts
    Hi Will, thanks a lot for sharing. However, to make it fully valid especially in XHTML the <param> tags must be closed properly and I noticed that they aren't in your code.

    Before:

    Code:
    <param name="name" value="value">
    After:

    Code:
    <param name="name" value="value" />
    Here's the fixed final snippet:

    Code:
    <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/uZPN-xpkaao" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/uZPN-xpkaao" /><param name="FlashVars" value="playerMode=embedded" /><param name="wmode" value="transparent" /></object>
    Last edited by Aziz; 31 July, 2010 at 09:24 AM. Reason: Valid W3C Youtube embed code

  7. Thanked by:

    TopDogger (31 July, 2010), Will.Spencer (1 August, 2010)

  8. #6
    Will.Spencer's Avatar
    Will.Spencer is offline Retired
    Join Date
    Dec 2008
    Posts
    5,033
    Blog Entries
    1
    Thanks
    1,010
    Thanked 2,329 Times in 1,259 Posts
    Quote Originally Posted by Aziz View Post
    Hi Will, thanks a lot for sharing. However, to make it fully valid especially in XHTML the <param> tags must be closed properly and I noticed that they aren't in your code.
    Ahh... it validated to HTML 4.01 Transitional, which is the standard I was building to at the time.

    Thanks for the update!
    Submit Your Webmaster Related Sites to the NB Directory
    I swear, by my life and my love of it, that I will never live for the sake of another man, nor ask another man to live for mine.

Similar Threads

  1. Embedding YouTube Videos
    By Andy101 in forum Video
    Replies: 1
    Last Post: 9 February, 2011, 00:46 AM
  2. Replies: 4
    Last Post: 1 March, 2010, 08:34 AM
  3. Replies: 0
    Last Post: 26 February, 2010, 00:21 AM
  4. [WTS] Website Traffic To Youtube (Or Pages With Videos and/or Sound)
    By WebTrafficSeller in forum Services
    Replies: 2
    Last Post: 3 February, 2010, 07:59 AM
  5. dead youtube videos
    By LogicFlux in forum Building
    Replies: 3
    Last Post: 25 February, 2009, 04:32 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •