I have some code which I use to display a video within an iframe. 99% of the time if works when the user wants to switch to fullscreen, in whatever browser.

However, we've found a couple of examples in IE where the fullscreen option only expands to fit the size of the iframe.

The iframe tag is rendered as follows:

<iframe id="FrameContent" allowtransparency="true" frameborder="0" title="" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" src="/whatever.aspx" style="width: 1660px; height: 867px; visibility: visible;"></iframe>

All parent/child iframes have the above allowfullscreen attributes.

However, from reading here and elsewhere, it seems the consensus is to use allowfullscreen only, with ="true" specified. Some the above code would be changed to render as follows -

<iframe id="FrameContent" allowtransparency="true" frameborder="0" title="" allowfullscreen src="/whatever.aspx" style="width: 1660px; height: 867px; visibility: visible;"></iframe>

Also, the others (webkitallowfullscreen & mozallowfullscreen) seem to have been deprecated so are no longer needed, is that correct?

I've seen other suggestions, such as using allowfullscreen="allowfullscreen" or allowfullscreen="" (because ="true" doesn't work!)

I've also seen msallowfullscreen and oallowfullscreen mentioned, and we don't currently use those.

Anyone able to clarify what should be used once and for all?

I have some code which I use to display a video within an iframe. 99% of the time if works when the user wants to switch to fullscreen, in whatever browser.

However, we've found a couple of examples in IE where the fullscreen option only expands to fit the size of the iframe.

The iframe tag is rendered as follows:

<iframe id="FrameContent" allowtransparency="true" frameborder="0" title="" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" src="/whatever.aspx" style="width: 1660px; height: 867px; visibility: visible;"></iframe>

All parent/child iframes have the above allowfullscreen attributes.

However, from reading here and elsewhere, it seems the consensus is to use allowfullscreen only, with ="true" specified. Some the above code would be changed to render as follows -

<iframe id="FrameContent" allowtransparency="true" frameborder="0" title="" allowfullscreen src="/whatever.aspx" style="width: 1660px; height: 867px; visibility: visible;"></iframe>

Also, the others (webkitallowfullscreen & mozallowfullscreen) seem to have been deprecated so are no longer needed, is that correct?

I've seen other suggestions, such as using allowfullscreen="allowfullscreen" or allowfullscreen="" (because ="true" doesn't work!)

I've also seen msallowfullscreen and oallowfullscreen mentioned, and we don't currently use those.

Anyone able to clarify what should be used once and for all?

• javascript
• html
• iframe
• html5-video
• fullscreen

• 4 What versions of IE does this break in? If they are older versions, would it not be simpler to not support those versions? – Ian Kemp - SE killed by LLMs Commented Mar 15, 2016 at 10:54
• @Ian Kemp It breaks in IE11 currently, only resizing to the iframe dimensions and not fullscreen. Have not been able to reproduce in Chrome or Firefox (latest versions of both). – Terry Delahunt Commented Mar 15, 2016 at 11:25
• 1 In IE it's supported as just allowfullscreen msdn.microsoft./en-us/library/…. Note that you need to call it with the proper JavaScript call, developer.mozilla/en-US/docs/Web/API/Element/… – TylerH Commented Mar 15, 2016 at 13:24
• @TylerH - javascript call is in place, no issues there – Terry Delahunt Commented Mar 15, 2016 at 13:47
• 1 Are you able to set up an alert like if - allowfullscreen - alert - true or something like that to differentiate between whether the condition does not exist or the iframe is not responding to it if it does exist? Thought the DLL might have been a clue sorry. – Steve Commented Mar 18, 2016 at 12:47

1 Answer 1

Here are some links, which you might find useful. In order "to clarify what should be used once and for all", see the W3 link.

1. The official spec for what browser manufacturers have to build into the iframe tag is found on the W3C website: https://www.w3/TR/html5/embedded-content-0.html#the-iframe-element
2. Since the W3C page is kind of hard to read, here is an easy to read list of iframe properties: http://www.w3schools./tags/tag_iframe.asp
3. Here is what works in each browser: http://caniuse./#search=iframe

It sounds like browser manufacturers are adding non-W3C-pliant attributes again into some of their tags. The "allowFullScreen" attribute really belongs in a param tag, but not in the iframe nor video tags themselves.

<object type="application/x-shockwave-flash">
    <param name=allowfullscreen value=true>
    <video>...</video>
</object>

You may be out of luck with IE, as it sounds like the browser manufacturers are creating hacks... instead of sticking to the official W3C specs. Any other attributes are optional & can be deprecated at any time.

If you want to show the video, try building it on the page without the iframe tag. Most respectable video serving panies won't be creating browser breaking videos. It's the ads which can cause problems with overlapping content on your page. I assume that's the problem that you're trying to prevent with the iframe tag?