onload website should display fullscreen

Question

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();}
   }

Possible duplicate of [how to initialize fullscreen without user interaction](http://stackoverflow.com/questions/30841517/how-to-initialize-fullscreen-without-user-interaction) — phihag, Jun 03 '16 at 08:33
I tried to link it with document.ready(), still it is not working — Nagu, Jun 03 '16 at 08:43
Full screen will not work in onload event http://stackoverflow.com/questions/14244397/fullscreen-works-onclick-but-not-onload — Mani, Jun 03 '16 at 08:51
Try a short `setTimeout` to go in fullscreen, works for me... — Vivaan, Aug 26 '21 at 12:53

score 7 · Answer 1 · answered Jun 03 '16 at 08:46

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

score 1 · Answer 2 · answered May 09 '21 at 08:22

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>

score 0 · Answer 3 · answered Jun 03 '16 at 08:42

0

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.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/

answered Jun 03 '16 at 08:42

Phong Nguyen

173
3
15

I added parameter function goFullscreen(player), still not working. Working fine with onclick event – Nagu Jun 03 '16 at 08:48
i referred same site. i tried to link with document.ready(), but still facing same issue – Nagu Jun 03 '16 at 08:55

score -1 · Answer 4 · answered Jun 03 '16 at 08:47

-1

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>

answered Jun 03 '16 at 08:47

rubncp

41
4

onload website should display fullscreen

4 Answers4