How to Fullscreen a Specific Element in a Web Page

Full control and how to modify styles in a website and web app

Photo by Thomas Hoang on Unsplash

Browsers have built-in fullscreen capabilities, which you can access using shortcut keys such as F11 or ⌃⌘F. But it applies to the current page as a whole, what if we want a specific element (such as a game or video) to go fullscreen?

You can do this using the Fullscreen API provided by the browser environment. Not only does it display specific elements fullscreen, but it also allows you to control the style when fullscreen.

To see an example, let’s make a simple HTML first:

<style>
#container {
width: 200px;
height: 200px;
display: grid;
place-content: center;
background-color: black;
}
#target {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div id="container">
<div id="target"></div>
</div>

For comparison, I made different colors for container and target. Next, bind the listener event for target:

<script>
const target = document.getElementById('target');
target.addEventListener('click', (e) => {
e.currentTarget?.requestFullscreen();
});
</script>

Here I use currentTarget, note that it always points to the element the event is attached to:

What Is the Difference Between target and currentTarget?

Here is the overall demo:

https://medium.com/media/35531c324677d4a1aa0ad3865aec6178/href

Click on the red area and you can see that only the red area has entered full-screen mode. The API it uses is Element.requestFullscreen(), but it may not work in some browsers due to different implementations like mozRequestFullScreen, webkitRequestFullscreen, etc.

So to write a compatible method:

const enterFullscreen = (elem, options) => {
return elem[
[
'requestFullscreen',
'mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullscreen',
].find((prop) => typeof elem[prop] === 'function')
]?.(options);
};

This method looks up the fullscreen APIs available for the incoming element and passes options. The options object here is optional, and some of its properties control the behavior. For example, the navigationUI property can control whether to display the navigation UI in full-screen mode; Chrome v100 also added a screen property, which allows starting full screen on a specified screen.

In addition, this method will return the result of the call, because Element.requestFullscreen() will return a Promise which is resolved with a value of undefined when the transition to full screen is complete.

Next are some related APIs:

  • document.exitFullscreen(): It will switch the fullscreen mode back to windowed mode. Returns a Promise which is resolved once fullscreen mode has been completely shut off.
  • document.fullscreenElement/ShadowRoot.fullscreenElement: This property returns the content displayed in fullscreen mode on the current DOM (or shadow DOM), or null if there is none.
  • document.fullscreenEnabled: This property returns whether you can use fullscreen mode. For example, return false when the “fullscreen” feature is not allowed or when fullscreen mode is not supported.
  • Element: fullscreenchange event: This event is fired when the specified element enters or exits the fullscreen mode.
  • Element: fullscreenerror event: This event is fired when an error occurs when the specified element enters or exits the fullscreen mode.

Similar to Element.requestFullscreen, we also need to use a compatible method when exiting fullscreen:

const exitFullscreen = () => {
return document[
[
'exitFullscreen',
'mozExitFullscreen',
'msExitFullscreen',
'webkitExitFullscreen',
].find((prop) => typeof document[prop] === 'function')
]?.();
};

When we have fullscreen elements, we can use the :fullscreen CSS pseudo-class to match them. This means that if there is more than one, they will all be selected.

Here’s the magic:

#target:not(:fullscreen) {
background-color: red;
}
#target:fullscreen {
background-color: transparent;
}

We make target red when not fullscreen (:not(:fullscreen)) and transparent when fullscreen (:fullscreen). Also note that some browsers require prefixes to work, such as :-webkit-full-screen or -moz-full-screen.

There is also the ::backdrop CSS pseudo-element is worth noting. It is a box the same size as the viewport that is rendered immediately below elements in fullscreen mode. This includes both elements which have been placed in fullscreen mode using the Fullscreen API and <dialog> elements.

By default, its background style is black, which may be useful when switching the video to full-screen mode.

Image from MDN

In our case, it can be used for target:

#target:not(:fullscreen) {
background-color: red;
}
#target:fullscreen {
background-color: transparent;
}
#target::backdrop {
background-color: pink;
}

The combination of the above means that when you switch target to full screen, its background color is not red, nor the default black, but pink.

Here is the demo:

https://medium.com/media/952876ab5b93f4996c31ac1b95cf4f98/href

Thanks for reading. If you like such stories and want to support me, please consider becoming a Medium member. It costs $5 per month and gives you unlimited access to Medium content. I’ll get a little commission if you sign up via my link.

Your support is very important to me — thank you.

Go composable: Build apps faster like Lego

Bit is an open-soruce tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

Micro-Frontends

Design Systems

Code-Sharing and reuse

Monorepos

Learn more


How to Fullscreen a Specific Element in a Web Page was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

Full control and how to modify styles in a website and web app

Photo by Thomas Hoang on Unsplash

Browsers have built-in fullscreen capabilities, which you can access using shortcut keys such as F11 or ⌃⌘F. But it applies to the current page as a whole, what if we want a specific element (such as a game or video) to go fullscreen?

You can do this using the Fullscreen API provided by the browser environment. Not only does it display specific elements fullscreen, but it also allows you to control the style when fullscreen.

To see an example, let’s make a simple HTML first:

<style>
#container {
width: 200px;
height: 200px;
display: grid;
place-content: center;
background-color: black;
}
#target {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div id="container">
<div id="target"></div>
</div>

For comparison, I made different colors for container and target. Next, bind the listener event for target:

<script>
const target = document.getElementById('target');
target.addEventListener('click', (e) => {
e.currentTarget?.requestFullscreen();
});
</script>

Here I use currentTarget, note that it always points to the element the event is attached to:

What Is the Difference Between target and currentTarget?

Here is the overall demo:

Click on the red area and you can see that only the red area has entered full-screen mode. The API it uses is Element.requestFullscreen(), but it may not work in some browsers due to different implementations like mozRequestFullScreen, webkitRequestFullscreen, etc.

So to write a compatible method:

const enterFullscreen = (elem, options) => {
return elem[
[
'requestFullscreen',
'mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullscreen',
].find((prop) => typeof elem[prop] === 'function')
]?.(options);
};

This method looks up the fullscreen APIs available for the incoming element and passes options. The options object here is optional, and some of its properties control the behavior. For example, the navigationUI property can control whether to display the navigation UI in full-screen mode; Chrome v100 also added a screen property, which allows starting full screen on a specified screen.

In addition, this method will return the result of the call, because Element.requestFullscreen() will return a Promise which is resolved with a value of undefined when the transition to full screen is complete.

Next are some related APIs:

  • document.exitFullscreen(): It will switch the fullscreen mode back to windowed mode. Returns a Promise which is resolved once fullscreen mode has been completely shut off.
  • document.fullscreenElement/ShadowRoot.fullscreenElement: This property returns the content displayed in fullscreen mode on the current DOM (or shadow DOM), or null if there is none.
  • document.fullscreenEnabled: This property returns whether you can use fullscreen mode. For example, return false when the "fullscreen" feature is not allowed or when fullscreen mode is not supported.
  • Element: fullscreenchange event: This event is fired when the specified element enters or exits the fullscreen mode.
  • Element: fullscreenerror event: This event is fired when an error occurs when the specified element enters or exits the fullscreen mode.

Similar to Element.requestFullscreen, we also need to use a compatible method when exiting fullscreen:

const exitFullscreen = () => {
return document[
[
'exitFullscreen',
'mozExitFullscreen',
'msExitFullscreen',
'webkitExitFullscreen',
].find((prop) => typeof document[prop] === 'function')
]?.();
};

When we have fullscreen elements, we can use the :fullscreen CSS pseudo-class to match them. This means that if there is more than one, they will all be selected.

Here’s the magic:

#target:not(:fullscreen) {
background-color: red;
}
#target:fullscreen {
background-color: transparent;
}

We make target red when not fullscreen (:not(:fullscreen)) and transparent when fullscreen (:fullscreen). Also note that some browsers require prefixes to work, such as :-webkit-full-screen or -moz-full-screen.

There is also the ::backdrop CSS pseudo-element is worth noting. It is a box the same size as the viewport that is rendered immediately below elements in fullscreen mode. This includes both elements which have been placed in fullscreen mode using the Fullscreen API and <dialog> elements.

By default, its background style is black, which may be useful when switching the video to full-screen mode.

Image from MDN

In our case, it can be used for target:

#target:not(:fullscreen) {
background-color: red;
}
#target:fullscreen {
background-color: transparent;
}
#target::backdrop {
background-color: pink;
}

The combination of the above means that when you switch target to full screen, its background color is not red, nor the default black, but pink.

Here is the demo:

Thanks for reading. If you like such stories and want to support me, please consider becoming a Medium member. It costs $5 per month and gives you unlimited access to Medium content. I’ll get a little commission if you sign up via my link.

Your support is very important to me — thank you.

Go composable: Build apps faster like Lego

Bit is an open-soruce tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

Micro-Frontends

Design Systems

Code-Sharing and reuse

Monorepos

Learn more


How to Fullscreen a Specific Element in a Web Page was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Zachary Lee | Sciencx (2024-03-28T10:02:01+00:00) » How to Fullscreen a Specific Element in a Web Page. Retrieved from https://www.scien.cx/2022/09/06/how-to-fullscreen-a-specific-element-in-a-web-page/.
MLA
" » How to Fullscreen a Specific Element in a Web Page." Zachary Lee | Sciencx - Tuesday September 6, 2022, https://www.scien.cx/2022/09/06/how-to-fullscreen-a-specific-element-in-a-web-page/
HARVARD
Zachary Lee | Sciencx Tuesday September 6, 2022 » How to Fullscreen a Specific Element in a Web Page., viewed 2024-03-28T10:02:01+00:00,<https://www.scien.cx/2022/09/06/how-to-fullscreen-a-specific-element-in-a-web-page/>
VANCOUVER
Zachary Lee | Sciencx - » How to Fullscreen a Specific Element in a Web Page. [Internet]. [Accessed 2024-03-28T10:02:01+00:00]. Available from: https://www.scien.cx/2022/09/06/how-to-fullscreen-a-specific-element-in-a-web-page/
CHICAGO
" » How to Fullscreen a Specific Element in a Web Page." Zachary Lee | Sciencx - Accessed 2024-03-28T10:02:01+00:00. https://www.scien.cx/2022/09/06/how-to-fullscreen-a-specific-element-in-a-web-page/
IEEE
" » How to Fullscreen a Specific Element in a Web Page." Zachary Lee | Sciencx [Online]. Available: https://www.scien.cx/2022/09/06/how-to-fullscreen-a-specific-element-in-a-web-page/. [Accessed: 2024-03-28T10:02:01+00:00]
rf:citation
» How to Fullscreen a Specific Element in a Web Page | Zachary Lee | Sciencx | https://www.scien.cx/2022/09/06/how-to-fullscreen-a-specific-element-in-a-web-page/ | 2024-03-28T10:02:01+00:00
https://github.com/addpipe/simple-recorderjs-demo