Fullscreen Control Web Component Demo

Video Example

Wrapping a video element enables fullscreen functionality with a convenient button overlay.

Basic Video

A simple video element enhanced with fullscreen controls.

<fullscreen-control>
  <video src="video.mp4"></video>
</fullscreen-control>

Iframe Example

Wrapping an iframe (like YouTube videos) enables fullscreen mode.

YouTube Embed

An embedded YouTube video with fullscreen capability.

<fullscreen-control>
  <iframe
    src="https://www.youtube.com/embed/..."
    width="560"
    height="315"
  ></iframe>
</fullscreen-control>

Custom Button Text & Label

Use button-text to adjust the visible button copy and optionally provide a distinct accessible name with button-label. Both attributes support the {name} token, which is replaced with the media's accessible name when available. Only add button-label when you need screen readers to hear something different than the visible text; otherwise leave it off and it will mirror button-text automatically.

Japanese Translation

Localized button text. The aria-label falls back to this fullscreen button. Supports {name}. Falling back to button-text when omitted, so reserve it for cases where the accessible announcement should differ from the visible text.

<fullscreen-control button-text="全画面表示">
  <video src="video.mp4"></video>
</fullscreen-control>

Accessible Name Injection

Using {name} automatically pulls the media's accessible name into the button text and label.

<fullscreen-control
  button-text="View {name} fullscreen"
  button-label="Enter fullscreen for {name}"
>
  <video src="video.mp4" aria-label="Product demo"></video>
</fullscreen-control>

Events

The component fires custom events when entering and exiting fullscreen mode.

Listening to Events

Try entering and exiting fullscreen to see the events logged below.

<fullscreen-control id="event-demo">
  <video src="video.mp4"></video>
</fullscreen-control>

<script>
  const element = document.querySelector('#event-demo');
  element.addEventListener('fullscreen-control:enter', (e) => {
    console.log('Entered fullscreen');
  });
  element.addEventListener('fullscreen-control:exit', (e) => {
    console.log('Exited fullscreen');
  });
</script>

Event Log:

Custom Styling

Since the component uses light DOM, you can style the button directly with CSS. You can also use CSS custom properties to adjust the button position.

Custom Button Style

Styling the fullscreen button directly with CSS.

<style>
  .custom-style button {
    background: #c35050;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-weight: bold;
  }
  .custom-style button:hover {
    background: #ff5252;
  }
</style>

<fullscreen-control class="custom-style">
  <video src="video.mp4"></video>
</fullscreen-control>

API Reference

Accessibility

The component automatically manages focus for keyboard accessibility. When the fullscreen button is clicked to enter fullscreen mode, focus will automatically return to the button after exiting fullscreen, ensuring a seamless keyboard navigation experience.

Attributes

button-text - Visible text for the fullscreen button (default: "View fullscreen"). Supports the {name} token to inject the media's accessible name.
button-label - Optional aria-label for the fullscreen button. Supports {name}. Falling back to button-text when omitted.

Events

fullscreen-control:enter - Fired when entering fullscreen mode
fullscreen-control:exit - Fired when exiting fullscreen mode

CSS Custom Properties

--fullscreen-control-button-inset-block-start - Top position (default: 0.5rem)
--fullscreen-control-button-inset-inline-end - Right position (default: 0.5rem)

Direct Styling

Since the component uses light DOM, you can also style the button element directly using standard CSS selectors like fullscreen-control button.

Methods

enterFullscreen() - Enter fullscreen mode
exitFullscreen() - Exit fullscreen mode
toggleFullscreen() - Toggle fullscreen mode

For complete documentation and browser support information, see the README.