How I Fixed Instagram's Annoying Web Video Player (With Shadow DOM & Pragmatic AI)

Description and use

OnePlay is a Chrome extension that adds robust video controls to Instagram Web using Shadow DOM and AI-assisted development.

Instagram Web hides basic video controls, making it hard to rewind, scrub, or change playback speed.

OnePlay provides robust, overlay‑proof video controls on Instagram Web and other sites, maintaining functionality even after site updates.

1. Identify the need for better video controls on Instagram Web.
2. Build a Chrome extension (Manifest V3, TypeScript).
3. Avoid DOM manipulation by mounting UI in a top‑level Shadow DOM attached to document.documentElement.
4. Track the target video’s bounding box with requestAnimationFrame and float the controller over it.
5. Implement overlay‑proof controls (z‑index, isolated pointer handling).
6. Add playback features (seek, volume, speed, shortcuts, themes).
7. Add stream recorder/downloader using captureStream() and MediaRecorder.
8. Use AI (Antigravity + Gemini Flash 3.8) for rapid prototyping, but manually tweak CSS and inspect DOM for accuracy.
9. Host a static version.json on Cloudflare Pages for update checks.
10. Publish extension to Chrome Web Store and GitHub.

Platforms like Instagram love to hide basic video controls and cover the <code><video></code> element with invisible overlays.

OnePlay – a lightweight Chrome extension (Manifest V3 + TypeScript) that puts clean, desktop‑grade controls on any HTML5 video across the web.

To avoid this, OnePlay never touches the host player's DOM. Instead: Top‑Level Shadow DOM…

I built most of this project using Antigravity paired with Gemini Flash 3.8.