Video on Desktop
Frameless Electron app that floats YouTube, custom pages, or local videos over your entire desktop as always-on-top overlays with live playback controls.
A desktop overlay player built with Electron and React that lets you float YouTube videos, custom web pages, or local video files on top of any window. The app runs a control panel separate from the overlay itself, with live transport controls, volume management, quality selection, and multi-overlay support.
- Electron 37
- React 19
- React Router v7
- Vite 7
- Tailwind CSS 4
- SWC (transpiler)
- ESLint
- @fontsource (self-hosted fonts)
- react-icons
Video on Desktop is an always-on-top desktop overlay system that decouples the control panel (a frameless Electron window with full window controls) from the overlay rendering layer. Users launch the control app, create overlays, and control playback remotely via IPC. Each overlay window is transparent, resizable, and sits above fullscreen apps.
The architecture uses a custom OverlayManager to spawn isolated BrowserWindow instances. YouTube embeds come through a sandboxed iframe with a strict Content Security Policy (CSP) that whitelists only the domains needed—frame-src for youtube.com, media-src for googlevideo.com, img-src for ytimg.com. Local video files larger than 50MB stream via a custom 'local-media:' protocol with range request support to avoid crashing on huge files. Custom URLs are loaded via BrowserView compositing, with an overlay shield UI layer to toggle click-through.
The UI is built with React Router v7, self-hosted typefaces (Hanken Grotesk and Space Mono), and Tailwind CSS via the official Vite plugin. The transport control panel lets you load YouTube by URL or ID, set custom web addresses, or pick local files; then adjust volume, seek ±5/10 seconds, toggle loop and captions, and switch playback quality on the fly. Electron's autoplay policy is configured to permit sound without a user gesture, letting overlays start unmuted.
- Multi-source overlay: YouTube embeds via iframe, custom web pages via BrowserView, local video files via custom protocol — all from a single control panel
- CSP-compliant YouTube iframe embedding: strict content security policy with minimal whitelisting for frame-src, media-src, and img-src to block unintended network access
- Large file streaming: files > 50MB served via custom 'local-media:' protocol with Range request support and token-based path masking instead of base64 inlining
- Isolated frameless windows: control panel and overlays are separate Electron processes with strict context isolation, sandbox mode, and preload-based IPC
- Live transport and settings: play/pause/seek, volume slider, captions toggle, quality selector (144p–1080p), loop toggle, and input shield to toggle click-through