I'm playing around with HTML5 videos on a webpage with the usual controls - play/pause, track, volume and fullscreen. These videos are of the mp4/ogg format. 80% of my user base uses Internet Explorer 11 (courtesy Google Analytics) and the remaining - Mozilla Firefox, Chrome and Safari. The problem is - all controls excepting the fullscreen control doesn't appear on IE11. Works like a charm on all other browsers.
caniuse[dot]com/#feat=fullscreen suggests that IE11 has native fullscreen support.
Here's an example:
The embedded video on this page allows fullscreen with a button.
Using the same code with the 'controls' attribute on the element doesn't show the fullscreen option on IE11.
Fiddle: http://jsfiddle.net/jaisfiddles/f1apusx3/
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
What am I missing? I was under the impression that IE11 has msRequestFullscreen() api code enabled.
I seemed to have stumbled across the solution myself.
My video element was contained within an iFrame. In order to make the fullscreen option available, I had the specify
<iframe allowfullscreen="true">
With other major browsers like Mozilla Firefox, Chrome etc, this wasn't necessary.
Refer to Known Issues on http://caniuse.com/#feat=fullscreen
"IE 11 does not properly support fullscreen when opening from an iframe."