22

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?

RajnishCoder
  • 3,455
  • 6
  • 20
  • 35
Terry Delahunt
  • 616
  • 4
  • 21
  • 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 Mar 15 '16 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 Mar 15 '16 at 11:25
  • 1
    In IE it's supported as just `allowfullscreen` https://msdn.microsoft.com/en-us/library/dn312070%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396. Note that you need to call it with the proper JavaScript call, https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen – TylerH Mar 15 '16 at 13:24
  • @TylerH - javascript call is in place, no issues there – Terry Delahunt Mar 15 '16 at 13:47
  • This page suggests a faulty or old DLL http://www.infragistics.com/community/forums/t/90006.aspx They have ie11 and Win8 Nice collection of options from MS = maybe you could set an alert to display if allowfullscreen is enabled https://msdn.microsoft.com/en-us/library/dn265028(v=vs.85).aspx and https://msdn.microsoft.com/en-us/library/dn312070(v=vs.85).aspx – Steve Mar 16 '16 at 17:12
  • @Steve - cheers, but that dll issue relates to an infragistics dll, which is not relevant here. – Terry Delahunt Mar 18 '16 at 12:12
  • 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 Mar 18 '16 at 12:47
  • @Steve - no worries at all. I will try the alert next time I'm looking at it, could actually be handy, a nice old school way to debug :) – Terry Delahunt Mar 18 '16 at 14:03

1 Answers1

3

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?

Clomp
  • 3,168
  • 2
  • 23
  • 36
  • 3
    Instead of the w3schools link (), I'd suggest using https://devdocs.io/html/element/iframe – hjpotter92 Mar 17 '16 at 07:27
  • 1
    Oh that's a nice looking site! I haven't seen devdocs.io before, but it eliminates all of the ads, which are pervasive on the w3schools site. I'll have to bookmark that site. :) – Clomp Mar 17 '16 at 17:12