Archives - January, 2013

W3C valid XTHML and HTML5 YouTube iframe embeds

If you're conscientious about keeping the markup of your website valid according to W3C standards, and you use YouTube embeds on your site, you've probably noticed that the default <iframe> snippet provided by YouTube will return validation errors for XHTML 1.0 Transitional and HTML5. XHTML Strict is affected even more by the standard YouTube embed snippet, due to lack of support of the <iframe> tag. For simplicity's sake, we'll focus on XHTML Transitional and HTML5.

Let's take a look at a standard <iframe> snippet generated by clicking the "Embed" button on a YouTube video page.

<iframe width="592" height="333" src="http://www.youtube.com/embed/i2mUgJcqSYw" frameborder="0" allowfullscreen></iframe>

XHTML 1.0 Transitional invalid YouTube embed markup

With an XHTML 1.0 Transitional doctype, the W3C Validator will identify the following error:

ERROR: "allowfullscreen" is not a member of a group specified for any attribute

HTML5 invalid* YouTube embed markup

An HTML5 doctype will return the following errors using the W3C's "experimental" conformance checker:

ERROR: "allowfullscreen" is not a member of a group specified for any attribute

ERROR: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

Fear not, these validation errors can be easily corrected with some quick edits and inline CSS

An HTML5 doctype will return the following errors using the W3C's "experimental" conformance checker: