{"version":"https://jsonfeed.org/version/1","title":"Aaron Gustafson: Content tagged video","description":"The latest 20 posts and links tagged video.","home_page_url":"https://www.aaron-gustafson.com","feed_url":"https://www.aaron-gustafson.com/feeds/video.json","author":{"name":"Aaron Gustafson","url":"https://www.aaron-gustafson.com"},"icon":"https://www.aaron-gustafson.com/i/og-logo.png","favicon":"https://www.aaron-gustafson.com/favicon.png","expired":false,"items":[{"id":"https://www.aaron-gustafson.com/notebook/fullscreen-video-and-iframes-made-easy/","title":"✍🏻 Fullscreen Video and Iframes Made Easy","summary":"The fullscreen-control web component adds fullscreen capabilities to any video or iframe element with a single wrapper and zero configuration.","content_html":"

Adding fullscreen capabilities to videos and embedded iframes shouldn’t require wrestling with prefixed APIs or managing focus states. The fullscreen-control web component handles all of that for you — just wrap it around the element. The component handles the rest as a discrete progressive enhancement.

\n

# Easy-peasy

\n

Here’s a simple example using a video element:

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

With that in place, the component

\n\n

The component uses light DOM, so your video stays in the regular DOM tree and all your existing CSS continues to work.

\n

# Fullscreen iframes

\n

Need to embed a YouTube video, slide deck, or code demo? The component works with iframe elements too:

\n
<fullscreen-control>\n  <iframe\n    src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\n    width=\"560\"\n    height=\"315\"\n    title=\"YouTube video player\"\n  >\n  </iframe>\n</fullscreen-control>
\n

The component automatically adds the necessary allow="fullscreen" and allowfullscreen attributes, including prefixed versions for broader compatibility.

\n

# Customizable button text

\n

You can change the button label to match your site’s language or writing style by setting the button-text attribute:

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

The default button label is “View fullscreen,” but you can use this attribute to customize it to anything you like. You can even dynamically inject the accessible name of the contained element, using the {name} token. For example:

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

This creates a button with the text “View Product demo fullscreen”. The component looks for aria-label, title, or other native naming on the wrapped element and uses that to make the button contextual.

\n

# Distinct screen reader labels

\n

If you want the visible label and accessible button name to differ, use the button-label attribute. Like button-text, it can also inject the accessible name of the controlled element using the {name} token:

\n
<fullscreen-control\n  button-text=\"Fullscreen\"\n  button-label=\"View {name} in fullscreen mode\"\n>\n  <iframe src=\"https://example.com\" title=\"Product teaser\"> </iframe>\n</fullscreen-control>
\n

This code will generate a button that visually reads “Fullscreen”, but is announced as “View Product teaser in fullscreen mode” to screen readers. In mode cases, button-text will suffice, but this option is available if you need to distinguish the buttons of multiple fullscreen controls from one another and don’t have visual space to display their accessible names.

\n

# Focus management

\n

If users activate fullscreen using the button, focus will automatically return to the button upon exiting fullscreen. This ensures keyboard users don’t lose their place.

\n

# Need more control?

\n

Want to manage the component yourself? The component exposes three methods:

\n
const control = document.querySelector(\"fullscreen-control\");\n\n// Enter fullscreen\nawait control.enterFullscreen();\n\n// Exit fullscreen\nawait control.exitFullscreen();\n\n// Toggle fullscreen state\ncontrol.toggleFullscreen();
\n

These handle all the browser prefixes and error handling for you.

\n

There are also a set of events you can tap into when the fullscreen state changes:

\n
const control = document.querySelector(\"fullscreen-control\");\n\ncontrol.addEventListener(\"fullscreen-control:enter\", () => {\n  console.log(\"Entered fullscreen mode\");\n});\n\ncontrol.addEventListener(\"fullscreen-control:exit\", () => {\n  console.log(\"Exited fullscreen mode\");\n});
\n

These events give you the ability to pause other media, track analytics, and the like.

\n

# Style the button

\n

Since the component uses light DOM, you can style the button directly with CSS:

\n
fullscreen-control button {\n  background: #ff6b6b;\n  color: white;\n  border: none;\n  padding: 0.75rem 1.5rem;\n  border-radius: 20px;\n  font-weight: bold;\n}\n\nfullscreen-control button:hover {\n  background: #ff5252;\n}
\n

The button is positioned absolutely by default (top-right corner), but you can adjust this with CSS custom properties:

\n
fullscreen-control {\n  --fullscreen-control-button-inset-block-start: 1rem;\n  --fullscreen-control-button-inset-inline-end: 1rem;\n}
\n

This uses logical properties, so it adapts automatically to different writing modes.

\n

# Installation

\n

Install via npm:

\n
npm install @aarongustafson/fullscreen-control
\n

Then import it in your JavaScript:

\n
import \"@aarongustafson/fullscreen-control/define.js\";
\n

Or load it from a CDN for quick prototyping:

\n
<script type=\"module\">\n  import { defineFullscreenControl } from \"https://unpkg.com/@aarongustafson/fullscreen-control@latest/define.js?module\";\n  defineFullscreenControl();\n</script>
\n

# Browser support

\n

The component uses modern web standards (Custom Elements v1, ES Modules) and handles browser-prefixed fullscreen APIs internally. For older browsers, you may need polyfills, but the component gracefully handles missing APIs with console warnings rather than breaking your page.

\n

# Demo and source code

\n

Check out the live demo to see all the features in action, or grab the code from GitHub.

\n","social_text":"Add fullscreen controls to videos and iframes with progressive enhancement. One wrapper, zero hassle.","url":"https://www.aaron-gustafson.com/notebook/fullscreen-video-and-iframes-made-easy/","tags":["web components","progressive enhancement","HTML","video","accessibility","media"],"date_published":"2025-12-29T17:17:27Z"}]}