HTML5 Video (mp4) on Internet Explorer 11 has no fullscreen option

Question

HTML5 Video (mp4) on Internet Explorer 11 has no fullscreen option

4.4k Views Asked by Jaideep Rangam At 20 October 2024 at 00:53

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.

Original Q&A

There are 3 best solutions below

hemnath mouli On 26 June 2015 at 03:56

I HAVE seen on some website that IE11 doesn't support Full Screen!!! It won't support the full screen api until version 11. Even IE10 has no fullscreen API!! Because they are native controls; they don't use the full screen API.

Emre Aybar On 03 May 2019 at 05:29

let to open from chrome with creating a redirect.html as;

http://~~/redirect.html?redirectUrl=<your adress>
redirect.html>>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="tr"> 

<head> 

<title>Please wait..Lütfen Bekleyiniz...</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript"> 
function openURL() { 
debugger; 
var url = getParameterByName("redirectUrl"); 

if (!url) 
return; 

if (msieversion()) { 
var shell = new ActiveXObject("WScript.Shell"); 
shell.run("Chrome " + url); 
window.open('', '_self', ''); 
window.close(); 
} 
else { 
window.location.href = url; 
} 
} 

function msieversion() { 

var ua = window.navigator.userAgent; 
var msie = ua.indexOf("MSIE "); 

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number 
{ 
return true; 
} 

return false; 
} 

function getParameterByName(name, url) { 
debugger; 
if (!url) url = window.location.href; 
// name = name.replace(/[\[\]]/g, "\\$&"); 
// var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
name = name.replace(/[\[\]]/g, "\\$&"); 
var regex = new RegExp("[?]" + name + "(=([^]*)||$)"), 
results = regex.exec(url); 
if (!results) return null; 
if (!results[2]) return ''; 
return decodeURIComponent(results[2].replace(/\+/g, " ")); 
} 
</script> 
</head> 

<body onload="openURL()"> 
</body> 

</html>

**Jaideep Rangam** · Accepted Answer

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."

HTML5 Video (mp4) on Internet Explorer 11 has no fullscreen option

There are 3 best solutions below

Related Questions in HTML

Related Questions in HTML5-VIDEO

Related Questions in INTERNET-EXPLORER-11

Related Questions in HTML5-FULLSCREEN

Trending Questions

Popular # Hahtags

Popular Questions