I have the html like below:
<html>
<body>
<div>Welcome.</div>
<iframe src='otherpagecontent' width='594' height='334'>
#docuemnt
<html>
<body>
<div style='color:yellow'>
This should not show in fullscreen.
</div>
<div style='color:yellow'>
This should not show in fullscreen.
</div>
<div id='fullscreen' style='color:blue;'>
This should go fullscreen only.
</div>
<div style='color:red'>
This should not show in fullscreen.
</div>
<div style='color:red'>
This should not show in fullscreen.
</div>
</body>
</html>
</iframe>
<iframe src='diffirentpage'>
#docuemnt
<button onclick="launchFullscreen(document.getelementByID('fullscreen'));">Launch Fullscreen</button>
</iframe>
</body>
</html>
In JS:
this.launchFullscreen= function (element) {
var requestFullScreen = (element.requestFullScreen || element.mozRequestFullScreen || element.webkitRequestFullScreen || element.msRequestFullscreen);
requestFullScreen.apply(element);
}
Result in Request for fullscreen was denied because of FeaturePolicy directives.
How can I get this <div id='fullscreen'> to go fullscreen?
Should I change the CSS for this <div>, or bind the request from somewhere else?
PS: This work fine on Chrome, but issue occur on Firefox.
Yes, you should use CSS for this. You can't force the user into full-screen by F11; however, you can make your div full screen by using the following CSS
div {width: 100%; height: 100%;}
This will of course assume your div is child of the tag. Otherwise, you'd need to add the following in addition to the above code.
div {position: absolute; top: 0; left: 0;}
You might try this
<iframe src="myurl.in"
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"></iframe >
from: https://www.geeksforgeeks.org/how-to-set-fullscreen-iframe/