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

Описание и применение

OnePlay – расширение Chrome, добавляющее надёжные видео‑контролы на Instagram Web, используя Shadow DOM и AI‑помощь.

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.