CODEWITHSUNDEEP
javascripthtml
Nagu
Nagu

Reputation: 149

onload website should display fullscreen

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

Upvotes: 5

Views: 36605

Answers (4)

tiago
tiago

Reputation: 1337

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>

Upvotes: 1

rubncp
rubncp

Reputation: 41

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>

Upvotes: -1

Ajanthan Mani
Ajanthan Mani

Reputation: 509

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.

Upvotes: 7

Phong Nguyen
Phong Nguyen

Reputation: 181

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/

Upvotes: 0

Related Questions