HTML5-Compliant YouTube Embedding

Posted on by AJ Ianozi

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"

To this:

style="border: none"

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

Comments (& Webmentions coming soon)

  • Pete on

    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.

    Replies

  • Luke Kirk on

    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.

    Replies

  • Anonymous on

    Thank you so much! Greatly appreciated!

    Replies

  • Chris Hammond on

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

    Replies

  • Anonymous on

    WOW, thanks!

    Replies

  • unfollowers on

    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.

    Replies