30-seconds-of-code/snippets/fullscreen.md

title, tags, expertise, cover, firstSeen, lastUpdated

title	tags	expertise	cover	firstSeen	lastUpdated
Toggle fullscreen mode	browser	intermediate	blog_images/antelope.jpg	2020-10-04T16:48:00+03:00	2020-10-19T22:49:51+03:00

Opens or closes an element in fullscreen mode.

• Use Document.querySelector() and Element.requestFullscreen() to open the given element in fullscreen.
• Use Document.exitFullscreen() to exit fullscreen mode.
• Omit the second argument, el, to use body as the default element.
• Omit the first element, mode, to open the element in fullscreen mode by default.

const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // Opens `body` in fullscreen mode
fullscreen(false); // Exits fullscreen mode