I have a simple HTML page containing a video tag. When shown outside a frame in a frameset I get a working fullscreen button on the video. When placed inside a frame in a frameset hovever, the fullscreen button is greyed out (Chrome) or it has disappeared (FireFox and IE 11). Does anyone have an explanation for this - and even better a solution for me? Any help is highly appreciated!
default.html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Video in frame</title>
</head>
<frameset rows="10%, 90%">
<frame/>
<frame src="video.html"/>
</frameset>
</html>
video.html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video width="400" controls>
<source src="test.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
When showing default.html in a browser, there is no (or greyed) fullscreen button. When showing video.html in a browser, there is a working fullscreen button.
The <frame> and <frameset> elements are deprecated for security reasons and should not be used. Instead prefer the <iframe> one and CSS.
But even using this, you will need to add the allowfullscreen attribute so the video can request the browser's fullscreen mode from this iframe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video in frame</title>
</head>
<body>
<iframe allowfullscreen src="video.html"></iframe>
</body>
</html>
Since stacksnippet's iframe don't have this attribute themselves, we need to outsource the live example to jsfiddle.