loading...
Cover image for 📺 Display any element on your site full screen

📺 Display any element on your site full screen

iainfreestone profile image Iain Freestone Updated on ・1 min read

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>

If you enjoyed this little snippet you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

markdown guide