CODEWITHSUNDEEP
javascripthtmliframehtml5-videofullscreen
Terry Delahunt
Terry Delahunt

Reputation: 616

Allowing an iframe to become full-screen, cross-browser

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?

Upvotes: 22

Views: 6260

Answers (1)

Clomp
Clomp

Reputation: 3308

Here are some links, which you might find useful. In order "to clarify what should be used once and for all", see the W3.org 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.org/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.com/tags/tag_iframe.asp
  3. Here is what works in each browser: http://caniuse.com/#search=iframe

It sounds like browser manufacturers are adding non-W3C-compliant 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 companies 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?

Upvotes: 3

Related Questions