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.

What OnePlay Does

• Overlay-Proof Controls: Sits at max z-index with isolated pointer handling, so transparent tap-to-mute/pause blockers can't intercept your clicks.
• Full Playback & Themes: Seek, volume, speed (0.5x to 3x), custom shortcuts (Space, J/L, Arrows), Full or "Minimal Pill" mode, and 4 built-in themes.
• Stream Recorder & Downloader: Right-click the bar to download direct videos, or record segmented streams (HLS/DASH/Blob) in real-time using captureStream() and MediaRecorder.

The Architecture: Complete DOM Decoupling

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

1. The host site's CSS leaks into your UI and breaks it.
2. Every time the site updates its obfuscated React/Vue tree or uses overflow: hidden, your extension breaks.

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

• Top-Level Shadow DOM: The controller mounts inside an isolated Shadow DOM attached directly to document.documentElement.
• Viewport Tracking: It tracks the target video's bounding box via requestAnimationFrame and floats right over it.

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

My Realistic AI Workflow (Human + Agent)

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:

• Fixing CSS Manually: Whenever a button alignment or theme style looked slightly off, I didn't waste time explaining it to the AI in 5 prompts. Tweaking the CSS myself was way faster.
• Inspecting DOM Myself: Social media sites have chaotic DOM structures. Instead of asking the AI to guess how a site works, I inspected the pages myself, figured out the quirks, and guided the agent on how to improve the logic.

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.

What’s Next? (Would Love Your Feedback!)

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

• 🔊 Volume Booster (going beyond 100%).
• 📝 Subtitles & AI Chat: Connecting to subtitle APIs, plus a companion Desktop App for local subtitle generation and asking AI questions about the video.
• 🖥️ Central Media Hub: A unified popup with live previews to control all playing videos across different tabs.

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!)