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.
Here’s a simple example using a video element:
<fullscreen-control>\n <video src=\"video.mp4\"></video>\n</fullscreen-control>With that in place, the component
\nThe component uses light DOM, so your video stays in the regular DOM tree and all your existing CSS continues to work.
Need to embed a YouTube video, slide deck, or code demo? The component works with iframe elements too:
<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>The component automatically adds the necessary allow="fullscreen" and allowfullscreen attributes, including prefixed versions for broader compatibility.
button textYou can change the button label to match your site’s language or writing style by setting the button-text attribute:
<fullscreen-control button-text=\"全画面表示\">\n <video src=\"video.mp4\"></video>\n</fullscreen-control>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:
<fullscreen-control button-text=\"View {name} fullscreen\">\n <video src=\"video.mp4\" aria-label=\"Product demo\"></video>\n</fullscreen-control>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.
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:
<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>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.
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.
\nWant to manage the component yourself? The component exposes three methods:
\nconst 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();These handle all the browser prefixes and error handling for you.
\nThere are also a set of events you can tap into when the fullscreen state changes:
\nconst 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});These events give you the ability to pause other media, track analytics, and the like.
\nSince the component uses light DOM, you can style the button directly with CSS:
\nfullscreen-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}The button is positioned absolutely by default (top-right corner), but you can adjust this with CSS custom properties:
\nfullscreen-control {\n --fullscreen-control-button-inset-block-start: 1rem;\n --fullscreen-control-button-inset-inline-end: 1rem;\n}This uses logical properties, so it adapts automatically to different writing modes.
\nInstall via npm:
\nnpm install @aarongustafson/fullscreen-controlThen import it in your JavaScript:
\nimport \"@aarongustafson/fullscreen-control/define.js\";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>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.
\nCheck 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"},{"id":"https://www.aaron-gustafson.com/notebook/over-90-of-newspaper-reading-is-in-print/","title":"✍🏻 Study: Over 90% of Newspaper Reading is in Print","summary":"A recent study in of the UK came to the conclusion that over 90% of newspaper reading is still taking place in print. Their findings are based on a survey of 12 UK newspapers during the period of 2007–2011, examining National Readership…","content_html":"\n\tA recent study in of the UK came to the conclusion that over 90% of newspaper reading is still taking place in print. Their findings are based on a survey of 12 UK newspapers during the period of 2007–2011, examining National Readership Survey data, circulation audits from the Audit Bureau of Circulations, and Neilsen data regarding web-based engagement.
\n\n\tIn reviewing their domestic readership, comparing time spent reading online versus time spent reading print editions, the study found that 96.7% of reading time was spent with the print edition. Of course the “quality” of said publications varied greatly and that sad figure was even sadder for some online editions: Readers of “tabloid” newspapers spent, on average, a depressing 1.16% of their time reading the paper online. On the flip side, proper news outlets that are not behind a paywall saw 6.98% of their readership online. Paywalled online editions were all over the place: 4.1% for the Financial Times and only 0.83% for the Times.
\n\n\tI think the most interesting stat, however, was that the overall reading of some of these publications actually declined over the study period. In fact, the total time people spent reading the Independent went down 30.88% between 2007 and 2011.
\n\n\tDue to limitations of the data from the Audit Bureau of Circulations, the study was not able to include circulation data via apps and the meager data they could get was mostly self-reported and had to do mainly with page requests. They could not get data on reading time spent with the various newspapers’ apps.
\n\n\tNow granted, the data they used for the study is two years old at this point and some of the newspapers have redesigned their websites since this time, but the study got me wondering:
\n\n\tHaving come from a journalism background, I am incredibly interested in seeing where things go. I have mixed feelings about print versus digital. On one hand, I have not subscribed to a newspaper for as long as I can remember. I only read them occasionally while traveling; most of my reading takes place digitally (online or at least via online sources). On the other hand, I do see print editions as being some people’s only access to what is going on around them.
\n\n\tIt will be interesting to see how this all shakes out.
\n\nUpdate: I made a small tweak to the declining readership paragraph per Neil’s correction in the comments.
\n","url":"https://www.aaron-gustafson.com/notebook/over-90-of-newspaper-reading-is-in-print/","tags":["media","society"],"date_published":"2013-08-12T15:45:00Z"}]}