Iain Freestone

πŸ“Ί Display any element on your site full screen

May 24, 2020

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>