Fix 'There is no attribute "allowfullscreen"' for YouTube videos embedded using an iFrame
Problem
You've embedded a video from YouTube into your HTML using their embed code e.g.
<iframe width="560" height="315" src="https://www.youtube.com/embed/dNVpL2-8-BU"
frameborder="0" allowfullscreen></iframe>
You then validate your HTML and get the error:
there is no attribute "allowfullscreen"
Cause
As stated by the w3c validation tool, one of the likely causes is that you're using a document type that does not support the "allowfullscreen" attribute for this element.The w3c validation tool tells you which document type you're using:
In this case, we're using XHTML 1.0 Transitional which does not support allowfullscreen.
Solution 1
HTML5 does support the allowfullscreen attribute on the iFrame element so changing the doctype to HTML5 will fix this issue. You can try this from the w3c validation tool by changing the drop down just to the right of doctype from (detect automatically) to HTML5 (experimental).
To change the doctype in your HTML, simply edit the doctype element so it looks like this:
<!DOCTYPE HTML >
However, if you validate your HTML again, you now get a different error:
Error: The
frameborder attribute on the iframe element is obsolete.
This one can be fixed by removing the frameborder attribute from the HTML and removing the border using CSS:
style="border-width: 0;"Solution 2
Alternatively, you can use the attribute allow with the value fullscreen:
allow="fullscreen"
Comments
Post a Comment