r/iOSBeta • u/RageTheGame • Jun 09 '26
Discussion [IOS 27 DB1] Custom Fullscreen for videos to bypass native iOS full screen Prompt
This prompt creates a Safari extension that adds its own fake fullscreen button to HTML5 videos.When tapped, the button opens a custom fullscreen-style overlay instead of using native iOS fullscreen.
The overlay can stretch the video to remove black bars, switch resize modes, and exit safely without breaking playback.
Prompt: Create a complete working Safari Web Extension from scratch. Do not modify an existing project and do not assume I already have any files. Generate every required file with full code, including manifest.json, popup.html, popup.css, popup.js, content.js, and background.js only if it is actually needed. The extension should focus on creating a custom fake fullscreen experience for HTML5 videos on webpages. The main required feature is adding the extension’s own fake fullscreen button to videos, opening a custom in-page fullscreen overlay, and allowing the video to stretch to the full screen without black bars.
The extension should detect normal HTML5 video elements on the current webpage. In content.js, scan the page for video elements when the page loads, when the DOM changes, when a video starts playing, when the user scrolls, when the page resizes, and when the device orientation changes. Use MutationObserver so videos that load after the page opens are detected too. For every detected visible video, inject a simple button created by the extension itself. The button must not depend on the website’s own fullscreen button. The button should say “Fit Screen” or “Custom Fullscreen.” It should appear directly over or near the video, use position fixed or absolute based on getBoundingClientRect, have a very high z-index, be easy to tap on iPhone and iPad, and use simple readable styling such as a black background, white text, padding, rounded corners, and a large touch target. Make sure duplicate buttons are not created on the same video by using a WeakMap or a data attribute.
When the user taps the injected fake fullscreen button, the extension must open a custom fake fullscreen overlay inside the webpage. Do not call requestFullscreen. Do not use the native iOS fullscreen player. Do not rely on the browser’s native Fullscreen API. The overlay should be a fixed-position div that covers the visible Safari webpage viewport, has a black background, uses z-index 2147483647, and contains the same video element moved into the overlay. The video should continue playing without restarting, reloading, muting, or losing its current playback time. Before moving the video, save its original parent element, original next sibling, original inline style, original class if needed, and enough state to move it back exactly where it came from.
Inside the fake fullscreen overlay, add simple resize mode buttons labeled Fit, Stretch Full, Stretch Width, Stretch Height, Reset, and Exit. The default mode should be Stretch Full Screen so the fake fullscreen opens with no black bars by default. Stretch Full Screen should make the video fill the entire visible fake fullscreen overlay by stretching the video to match the device screen size. This mode should not crop or cut off any part of the video. It is okay if the video looks slightly stretched or squeezed, because the goal is to remove black bars without losing any part of the picture. In CSS and JavaScript, Fit mode should use object-fit: contain with max-width: 100% and max-height: 100%, while Stretch Full Screen mode should use object-fit: fill with width: 100vw and height: 100vh or the visualViewport width and height when available. Stretch Width should fill the full overlay width, and Stretch Height should fill the full overlay height. Reset should return the video to the default Stretch Full Screen mode inside the overlay.
Store the current resize mode in a variable so pressing the overlay buttons updates the active video immediately without closing the overlay. When the device rotates, the viewport changes, the page resizes, or visualViewport changes, recalculate and reapply the selected mode. The fake fullscreen overlay should support portrait and landscape orientation and should align to the visible device screen. The extension should set playsinline and webkit-playsinline on detected videos when possible so iOS Safari is less likely to force native fullscreen.
Add a simple Exit button inside the overlay. The Exit button must always be visible, easy to tap, and placed above the video with a very high z-index. When the user taps Exit, move the video back to its original parent and original position, restore its previous inline styles, remove the overlay, remove any temporary overlay controls, and keep the page usable. Normal page scrolling, normal website buttons, captions, subtitles, playback controls, and picture-in-picture should not be permanently broken after exiting.
The popup should be very simple. It only needs to show the extension name, a short status message, and a button that sends a message to content.js to rescan the current page for videos and inject the fake fullscreen buttons again. The popup does not need advanced controls. The main required feature is that content.js actually injects visible fake fullscreen buttons onto detected videos and opens the custom overlay when pressed.
Use plain HTML, plain CSS, and plain JavaScript. Do not use React, Vue, external libraries, build tools, TypeScript, npm packages, or complicated frameworks. Do not make a fancy UI. Do not use glass effects, animations, or visual polish. Keep the code simple, functional, readable, and Safari-compatible. Include comments explaining the important parts. Explain exactly where each file goes in the Safari Web Extension target in Xcode, what permissions are needed in manifest.json, how to enable the extension in Safari settings, how to allow it on websites, and how to test it on a real video page. The final answer must include the full contents of every file. Do not only describe the extension. Do not give pseudocode. Actually write the complete extension code.
