Flovid — Floating Video Widget

A zero-install, draggable browser widget that supercharges HTML5 video players with circular progress tracking, granular speed control, micro-navigation, live captions, and a sleek dark/light theme.

Quick Start

1. Open any webpage with an HTML5 <video> element (YouTube, LMS, Coursera, etc.).
2. Open DevTools Console (F12 → Console).
3. Copy the entire contents of floVid.js and paste it into the console. Press Enter.
4. The widget appears in the top-right corner. Drag it anywhere.

Features

Feature	Description
Circular Progress Ring	SVG ring with gradient stroke showing % completion and speed-adjusted remaining time
Rotary Scrubbing	Click and drag on the circular progress ring in a clockwise/anti-clockwise motion to seek forward/backward
Dynamic Completion Time	Dynamic "Completes at" estimation above the circle that adjusts in real-time to your playback speed
Hover Volume Scroll	Hover over the widget and scroll your wheel up/down to adjust volume, featuring temporary circular feedback
Granular Speed Control	Slider from 0.5x to 3.0x in 0.05x steps, with + / − nudge buttons
Micro-Navigation	⏪ / ⏩ ±5s seek buttons; click elapsed time to jump to any hh:mm:ss timestamp
Play / Pause Toggle	Reliable play/pause button that works even when native video click is intercepted
Theme Toggle	Instantly switch between dark and light modes
Window Fullscreen	CSS fake-fullscreen keeps the widget visible; native fullscreen auto-hides it
Live Captions	Web Speech API overlay (English) — experimental, Chrome only
SPA Adaptation	Automatically detects and rebinds to new <video> elements when navigating between videos
CSP-Safe	Built entirely with document.createElement / createElementNS — works on YouTube's Trusted Types CSP

How It Works

• Injection: A single IIFE pasted into the console injects a fixed-position div (z-index: 99999) into document.body.
• Video Binding: The script queries document.querySelector('video') and attaches event listeners. A MutationObserver watches for SPA video swaps and rebinds automatically.
• Progress Math: (currentTime / duration) * 100 maps to SVG stroke-dashoffset on a 140×140px ring.
• Speed-Aware Remaining Time: remainingWallClock / playbackRate gives real-world minutes left at the current speed.
• DOM Construction: Every element is built programmatically via createEl() and createSvgEl() helpers to bypass Trusted Types restrictions.

File Overview

File	Purpose
floVid.js	The complete widget script (paste this into the console)
context.md	Problem statement, goals, target users, and constraints
architecture.md	Component breakdown, data flow, and system boundaries
decision.md	Design decisions and trade-offs
prompts.md	Iterative prompt history that shaped the project

Browser Support

• Chrome (recommended) — full feature set including SpeechRecognition captions
• Firefox / Edge / Safari — core widget works; captions may be limited

Known Limitations

• Console-only: Must be re-pasted on every page reload (no extension persistence).
• Captions require mic access: The Web Speech API captures ambient audio via the device microphone; it cannot tap the system audio stream directly due to browser security sandboxing.
• Single video: Binds to the first <video> element found. On pages with multiple videos, it targets the primary player.

Author

Built by Varun Gautam — LinkedIn

Click the © 2026 Varun Gautam text inside the widget to visit the author's profile.

License

MIT © 2026 Varun Gautam