Published on

📺 Display any element on your site full screen

Authors

The Fullscreen API allows you to present individual elements of your site in full-screen mode & exit when required.

This is useful if certain areas of the site would benefit from being in full screen so that full attention can be given to that part when needed, such as videos, games, charts, etc.

The very simple example below has 2 elements that have been "enabled" for full screen mode (fullScreenElement1, fullScreenElement2) a user clicking on one of these will initiate a requestFullscreen on it.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Static Template</title>
  </head>
  <body>
    <div class="main">
      <div class="wrapper">
          <div
            id="fullScreenElement1"
            class="button"
            onclick="document.getElementById('fullScreenElement1').requestFullscreen()"
          >
            <p>🍔</p>
            Click to go fullscreen
          </div>
          <div
            id="fullScreenElement2"
            class="button"
            onclick="toggleFullScreen('fullScreenElement2')"
          >
            <p>🌶️</p>
            Click to go fullscreen
          </div>
        </div>
      <!-- <script src="main.js"></script> -->

      <script>
        function toggleFullScreen(id) {
          document.getElementById(id).requestFullscreen()
        }
        </script>
  </body>
</html>