Saturday, October 15, 2011

HTML5-Compliant YouTube Embedding

Today I was updating my fathers site, Home Tips With Jim to be HTML5-compliant.  It was pretty much just a matter of removing the center tag and target="_blank" from the links -- or so I thought.

I'm putting this out there for anyone that may run into the problem in the future; while trying to use YouTube's new iframe embed system to embed my father's playlist into the page, I ran into two problems spit out by the W3 Validator:
Attribute allowfullscreen not allowed on element iframe at this point.
And:
The frameborder attribute on the iframe element is obsolete. Use CSS instead.
After some quick research, I found the solution; apparently frameborder is depreciated, and allowfullscreen is not fully implemented.
The solution, was to remove those two elements, and replace the frameborder one with CSS.  So, if anyone else runs into this problem, go into the
<iframe> tag, and change this part:
frameborder="0" allowfullscreen
To this:
style="border: none"

You can now view the source to the HTWJ site, and see how it's been fixed.

9 comments:

  1. The W3.org validator is really just a guide line - especially when it comes to things like HTML5, CSS3 and everything else still in development.

    For someone who just wants a working website, having one deprecated tag isn't a huge problem because back support is usually there for a very long time.

    Anyway, I'm sure YouTube (who use HTML5 videos themselves) will add some code that is HTML5-compliant soon enough.

    Interesting read though.

    ReplyDelete
  2. I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
    html5 converter

    ReplyDelete
  3. Excellent work! A great example of the potential power of HTML5 canvas!html5

    ReplyDelete
  4. wow what a wonderful site!HTML5 Embedding can be much better in all platform.swf to html5 converter

    ReplyDelete
  5. I knew a quick Google search would solve this problem. I know the XHTML validator is just a guideline but I'm a huge perfectionist! Thanks.

    ReplyDelete
  6. Thank you so much! Greatly appreciated!

    ReplyDelete
  7. Thanks for the post, I was able to fix a couple of validation errors myself due to this.

    ReplyDelete
  8. As of April 2013, Facebook's embed code still has frameborder="0" tag. So chaning it manually is a way, but it is too bad to see this validation error.

    ReplyDelete