hi i am working on a website using HTML CSS JavaScript and jQuery. I wanted to display website fullscreen(like when we click F11) onload. I am able to enter fullscreen using onclick even. But with onload event fullscreen script is not working. When i load a site it should display in fullscreen. please help. Here is my code : here is my HTML code:
<html id="player3">
<body onload="goFullscreen('player');">
</body>
</html>
Here is my js
function goFullscreen() {
var element = document.getElementById("player3");
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();}
}
hi i am working on a website using HTML CSS JavaScript and jQuery. I wanted to display website fullscreen(like when we click F11) onload. I am able to enter fullscreen using onclick even. But with onload event fullscreen script is not working. When i load a site it should display in fullscreen. please help. Here is my code : here is my HTML code:
<html id="player3">
<body onload="goFullscreen('player');">
</body>
</html>
Here is my js
function goFullscreen() {
var element = document.getElementById("player3");
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();}
}
- 1 Possible duplicate of how to initialize fullscreen without user interaction – phihag Commented Jun 3, 2016 at 8:33
- Try linking its call to the document.ready() – Gar Commented Jun 3, 2016 at 8:36
- I tried to link it with document.ready(), still it is not working – Nagu Commented Jun 3, 2016 at 8:43
- 1 Full screen will not work in onload event stackoverflow./questions/14244397/… – Mani Commented Jun 3, 2016 at 8:51
-
Try a short
setTimeoutto go in fullscreen, works for me... – Vivaan Commented Aug 26, 2021 at 12:53
4 Answers
Reset to default 7Browsers doesn't allow sites to load in fullscreen mode without user interaction. You will get the following error message
Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
To Handle this change your UX to make the user interact with your site to go fullscreen mode.
I added an onload, ondrag, onmouseover, oncontextmenu and more to make sure it is always at fullscreen
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="appin" onclick="openFullscreen();" onload="openFullscreen();" onmouseover="openFullscreen();" oncontextmenu="openFullscreen()" ondrag="select()">
<h1>Fullscreen on load page</h1>
<style>
*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
background-color: rgba(255,255,255,0)!important;
padding: 20px;
}
::backdrop
{
background-color: white;
}
</style>
<script>
var elem = document.getElementById("appin");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
<p>Note: It does not work on iframes, that means, it will not work on the stackoverflow snipped. Copy and paste the code to ex. w3schools and it will work :)</p>
</body>
</html>Have something wrong in your code:
Your function have no parameter:
function goFullscreen()
But when you call it, you transfer parameter to function: onload="goFullscreen('player');"
And if everything is right. you should be put javascript function in $(document).ready()
This solution: https://www.jwplayer./blog/using-the-browsers-new-html5-fullscreen-capabilities/
you can create an index.html with this code in the body on load, fill in "fullScreenPage.html" with url of the page that you can open in fullscreen.
<body onload="window.open('fullScreenPage.html, '', 'fullscreen=yes, scrollbars=auto');"></body>