How do I automatically leave full screen on youtube videos?

JavaScript
1

How do I automatically leave full screen on youtube videos?

video example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/XHvYhMghk44" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2

You should be able to use the Fullscreen API.

Here’s a demo using the iframe from above. Press the button to enter fullscreen. As expected, the video will enter fullscreen mode, then it will automatically exit fullscreen mode after 5 seconds.

This works in Firefox, but please be aware that not all browsers are implementing the unprefixed version of the API, so you might need to consult this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fullscreen API demo</title>
  </head>
  <body>
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/XHvYhMghk44"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
    <button>Enter Fullscreen</button>

    <script>
      const iframe = document.querySelector('iframe');
      const button = document.querySelector('button');

      button.addEventListener('click', () => {
        iframe.requestFullscreen();

        setTimeout(() => {
          document.exitFullscreen()
        }, 5000)
      });
    </script>
  </body>
</html>

This might be helpful by way of further reading:

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.