Errors with embedding a youtube video in html/xhtml

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
Arnvid
Rank I - Novice
Posts: 13
Joined: Fri Mar 14, 2014 11:48 am

Errors with embedding a youtube video in html/xhtml

Post by Arnvid »

As we found out before, the code some larger companies provide, don't always provide a code that is html/xhtml valid.
Last time Albert W. found out that the code problem Amazon.com gave, was basically just that all "&" in the code had to be changed to the correct "&".

This time it's youtube.com who provide a code that's not html/xhtml valid.

First I find the video I need, then embed it through the easy option youtube.com provide - and get the code which look like this:

<iframe width="480" height="360" src="//www.youtube.com/embed/hnsNwwwHm2I" frameborder="0" allowfullscreen></iframe>

Then I embedd this within the code of the site, and it looks like this:

<div class="container_video">
<iframe width="480" height="360" src="http://www.youtube.com/embed/hnsNwwwHm2 ... ransparent" border="0" allowfullscreen></iframe>
</div>


This code is found on this page, the last of the two videos at the end of this page:
http://www.nilevikings.com/maps/luxormap2.html
Checking this with CSE HTML Validator, I get one error:

'The "allowfullscreen" attribute for this "iframe" element has a missing attribute value. This is a boolean (true or false) attribute. Because this appears to be an XML based document, use exactly allowfullscreen="allowfullscreen" or allowfullscreen="" to represent true or omit the attribute entirely to represent false. NOTE: Never use the values "true", "false", "1", or "0" for boolean attributes.'

Changing the code accordingly, I get this code:

<div class="container_video">
<iframe width="480" height="360" src="http://www.youtube.com/embed/hnsNwwwHm2 ... ransparent" border="0" allowfullscreen="allowfullscreen"></iframe>
</div>

(found on this page http://www.nilevikings.com/maps/luxormap3.html)

Putting this through my now so good friend, the CSE HTML Validator, I don't get any error messages any longer.
Great, but then I find out that I can check it in w3 validator as well, and I get this error message
http://bit.ly/SEG0ny

'Error Line 394, Column 150: Attribute border not allowed on element iframe at this point.
…wHm2I?wmode=transparent" border="0" allowfullscreen="allowfullscreen"></iframe>'


Ok, for me, I trust (based upon experience) CSE HTML Validator most - BUT, my question is how I should react towards the w3 message.
Normally I have experienced that I get a green lamp in w3 - but CSE HTML Validator are more strict.
Is it opposite in this case - or what?

Great if people can help here!
Arnvid
Rank I - Novice
Posts: 13
Joined: Fri Mar 14, 2014 11:48 am

Re: Errors with embedding a youtube video in html/xhtml

Post by Arnvid »

Just updated the post above (-:
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Errors with embedding a youtube video in html/xhtml

Post by Albert Wiersch »

Hello,

CSE HTML Validator tries to be more practical, so in some cases it is more strict and in others it is more lenient.

However, in this case, it looks like a bug because "border" is not a valid attribute for "iframe". It may have been used at one point, perhaps by older versions of IE, but it looks like it's time to not allow that anymore so I've removed support for this going forward.

The correct attribute to use is "frameborder" (but see below). It looks like that is what was given to you but it changed to "border" somehow.

Another issue: "frameborder" is not allowed in HTML5. You should use CSS and perhaps try the new HTML5 "seamless" attribute which tries to make the iframe look like it's part of the parent document (try seamless="seamless").

So I think you should at least change it to "frameborder", although you may want to get rid of it altogether and use CSS and/or "seamless" instead. If you want it to validate, then you will definitely need to remove that attribute for HTML5+ documents and use an alternate solution.

I hope this helps!
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Arnvid
Rank I - Novice
Posts: 13
Joined: Fri Mar 14, 2014 11:48 am

Re: Errors with embedding a youtube video in html/xhtml

Post by Arnvid »

Thanks Albert,

- great to get rid of a bug.

Did change it into xhtml validated code, and now it come without errors in both CSE HTML Validator.
Will look into CSS later (-:
Thanks!

Arnvid
Post Reply