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

Editing the YouTube embed <iframe> for valid XHTML 1.0 Transitional

UPDATED: Mike Ratcliffe (see comments below) lets us know that the "allowfullscreen" attribute is an HTML5 <iframe> attribute necessary for allowing fullscreen playback when HTML5 video is used. If you're using XTHML declaration, and you want your page to validate with no errors you can simply remove this attribute from the iframe. However, doing so will prevent users from viewing the video in full-screen mode if HTML5 video is used as a fallback (which will occur if the Flash Player is not available). Removing the "allowfullscreen" attribute results in the following <iframe> snippet:

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

The iframe will now pass W3C validation for XHMTL 1.0 Transitional!

Note that, despite the fact that the page that the iframe is being embedded in was declared as XHTML, the embedded content in the YouTube iframe is HTML5, so removing the "allowfullscreen" attribute will prevent viewers using HTML5 video from viewing the video full-screen from the embed.

Editing the YouTube embed <iframe> for valid* HTML5

UPDATED: The "allowfullscreen" attribute is now valid in the W3C HTML5 validator. Thanks to Mike Ratcliffe for the updated information!

As was noted in the XHTML Transitional example, the source of one of our validation "errors," the "allowfullscreen" attribute. You can remove the "allowfullscreen" to pass the conformance checker, but be aware that this will prevent HTML5 video users from having the option of viewing the video full-screen. The "allowfullscreen" attribute is now recognized as a valid attribute. That leaves us with the "frameborder" error, which is an obsolete attribute, according to the current HTML5 conformance checker. If we simply remove this attribute, the embedded YouTube play will now have a unsightly border around it. Fortunately, the frame border can be styled using the CSS "border" shorthand property using inline CSS. Using the border shorthand property to set the border-width to zero ("border:0;"), will effectively remove the frame border (note: "border:none;" - shorthand for "border-style:none" will also result in the same effect, but we save a few characters using the border-width approach). The resultant <ifram> snippet is:

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

The above snippet will now pass the W3C HTML5 experimental validator.

*Note: the current HTML5 conformance checker should be considered "experimental" as it is a work in progress.


Comments

Avatar of Mike Ratcliffe
Posted by Mike RatcliffeApr 07, 2013 at 2:32 pm

“The “allowfullscreen” attribute is a custom attribute specific to the YouTube”

This is not true. It is part of the HTML5 spec:
https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#security-and-privacy-considerations

The attribute is necessary along with “?fs=1” in order for the “full screen” button to be available for HTML5 video in all modern browsers.

I have notified the W3C about this invalid error.

Avatar of George Probst
Posted by George ProbstApr 07, 2013 at 4:06 pm

Mike,

Thanks for the info. I’ve updated the post accordingly. Could you shed some light on why the “allowfullscreen” attribute was listed in the Living Spec as early as July of 2012 (based on your link), yet it wasn’t listed in the December HTML5 candidate release?

http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element

Also, I disabled Flash to check out the behavior of the HTML5 video from the YouTube embeds, and I still can’t get the full-screen button to appear even after appending the embed URL with the “?fs=1” parameter and including the allowfullscreen attribute.

If I read your comment correctly, including the allowfullscreen attribute still requires the fs parameter to be set to true. Since this parameter isn’t included in the default YouTube embed, is the allowfullscreen attribute effectively useless without it?

Avatar of Mike Ratcliffe
Posted by Mike RatcliffeApr 07, 2013 at 5:35 pm

Yes, the specs are confusing ... some by whatwg and some by the W3C. The W3C guys are currently debating which standards they should be validating against. A bug has been logged here:
http://bugzilla.validator.nu/show_bug.cgi?id=971

If you include the “?fs=1” parameter and include the allowfullscreen attribute then the fullscreen button should be visible ... I am not sure what would prevent it, maybe you did not include the html5 doctype?

It does seem that the ?fs=1 parameter is unnecessary in html5 iframe embeds ... the following example works just fine:

<div class=“youtube-wrapper”>
  <iframe class=“youtube-player” src=“http://www.youtube.com/embed/M2y5S7p81jU” allowfullscreen=”” ></iframe>
</div>

Avatar of George Probst
Posted by George ProbstApr 07, 2013 at 6:03 pm

Doctype was correct. Seems the issue is browser specific. I can’t get your embed or the one I was testing to display the full-screen button in Safari or Chrome, but it shows up fine in Firefox and Chrome. I’m disabling the Flash Player plug-in to force fall-back to HTML5 video in each case. With Flash Player enabled, the full-screen button displays regardless of the presence of allowfullscreen, as best I can tell.

Thanks again for the insight. I have a hard time keeping up with all of these specifications. :O)

P.S. I checked using the embeds in an XHTML declared doc, as well, out of curiosity, and the behavior was the same.

http://www.gtpdesigns.com/sample-files/test-html5-embed.html

http://www.gtpdesigns.com/sample-files/test-xhtml-embed.html

Avatar of Mike Ratcliffe
Posted by Mike RatcliffeApr 15, 2013 at 6:07 am

The allowfullscreen attribute has now been added to the validator.

Avatar of George Probst
Posted by George ProbstApr 18, 2013 at 9:35 am

Mike,

Thanks for the update and all of your insight!

Leave a comment on this post