The `fullscreen-control` web component simplifies adding fullscreen support to `video` and `iframe` elements. It handles browser-prefixed fullscreen APIs, focus management, keyboard events (Escape to exit), and ARIA attributes automatically. Using light DOM, it keeps elements in the regular DOM tree so existing CSS continues to work. Features include customizable button text with accessible name injection via a `{name}` token, separate visible and screen-reader labels, programmatic API methods (`enterFullscreen`, `exitFullscreen`, `toggleFullscreen`), and custom events for state changes. The button is fully styleable via CSS and custom properties. Available via npm or CDN.
Table of contents
# Easy-peasy# Fullscreen iframes# Customizable button text# Distinct screen reader labels# Focus management# Need more control?# Style the button# Installation# Browser support# Demo and source code2 Impressions