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

Ever watched a video on Instagram Web and wanted to rewind just 5 seconds? You can't.

Platforms like Instagram love to hide basic video controls and cover the <video> element with invisible overlays. Click once, and it mutes. Click again, and it pauses or opens a post. Want to scrub through the timeline or change playback speed? Good luck.

I got tired of fighting restricted web players, so I built OnePlay - Video Control —a lightweight Chrome extension (Manifest V3 + TypeScript) that puts clean, desktop-grade controls on any HTML5 video across the web.

Here’s a quick look at what it does, how I kept it from breaking when websites update, and my realistic workflow building it with AI.

If you inject UI directly inside a website's player container, two bad things happen:

To avoid this, OnePlay never touches the host player's DOM. Instead:

Because it's completely decoupled from the site's layout tree, platforms can redesign their frontend every week and OnePlay keeps working.

I built most of this project using Antigravity paired with Gemini Flash 3.8. Honestly, for a browser extension, a fast model like Flash was more than enough—I didn't need slow, heavy models.

However, relying 100% on AI prompts can slow you down. Here is how I balanced it:

And for update checks, instead of hardcoding everything and waiting days for Chrome Web Store reviews, I hosted a simple static version.json file on Cloudflare Pages.

OnePlay runs 100% locally with zero tracking. If people find it useful, I’m planning to build a modular plugin system to add:

Give it a try and let me know what you think—or what feature you'd like to see next!

👉 Install from Chrome Web Store 👉 Source Code on GitHub (Stars ⭐ are appreciated!)