☕ If you find this tool helpful & would like to support its maintenance, please consider leaving a tip on:
https://ko-fi.com/piknockyou
Thank you! :-)
🖼 For a quick impression of this script, refer to the screenshots at the bottom.
Instagram & Facebook | Ultimate Video Controls
Transforms Facebook and Instagram's barebones video/reel players into a full-featured media experience with YouTube-style controls, keyboard shortcuts, and a sleek auto-hiding interface.
Why You Need This
Instagram's and Facebook's native video/reel controls are frustratingly limited:
- No progress bar — you can't seek or see how long a video is
- No speed control — stuck at 1x playback
- No keyboard shortcuts — can't skip, adjust volume, or navigate
- No Picture-in-Picture — can't multitask while watching
- No fullscreen
This script fixes all of that with a professional control bar that appears on hover and auto-hides when you're done.
Key Features
Full Control Bar
- Seekable Progress Bar: Click or drag to jump anywhere in the video. Time labels show current position and duration (supports hours for long videos).
- Play/Pause Button: Visual toggle with play/pause icons.
- Volume Control: Click to mute/unmute, hover for a vertical slider popup. Includes an auto-unmute toggle to automatically unmute all videos on load.
- Speed Control: Click to cycle speeds (0.25x–4x), hover for a slider popup.
- Picture-in-Picture: Pop the video out to watch while browsing other tabs.
- Fullscreen: True fullscreen with all controls intact.
Keyboard Shortcuts
| Key |
Action |
Space / K |
Play/Pause |
← / J |
Seek back 5 seconds |
→ / L |
Seek forward 5 seconds |
↑ / ↓ |
Volume up/down |
M |
Mute/Unmute |
[ / < |
Decrease speed |
] / > |
Increase speed |
, / . |
Frame step backward/forward (while paused) |
0-9 |
Seek to 0%–90% of video |
Home / End |
Jump to start/end |
F |
Toggle fullscreen |
P |
Toggle Picture-in-Picture |
Hold → |
Temporarily speed up to 2x |
Smart Behavior
- Auto-Hiding UI: Controls fade away after 2 seconds of inactivity, reappear on mouse movement.
- Platform-Aware: Automatically detects Facebook vs. Instagram and applies the correct accent color, DOM strategy, and native control handling — no configuration needed.
- Hides Native Overlays: Facebook's native play/pause/mute/menu buttons are suppressed while the control bar is visible. Instagram's mute and tags buttons are repositioned above it so they remain accessible.
- Preferences Saved Per Platform: Volume, speed, and auto-unmute are stored independently for Facebook and Instagram.
- Responsive Layout: Automatically switches to stacked mode (progress bar on top) on narrow videos.
- Edge-to-Edge Design: Progress bar and buttons extend to the very edges for precise clicking, especially in fullscreen.
- SPA Navigation Support: Re-scans for new videos after Facebook and Instagram route changes.
Scroll Wheel Controls
- On Volume Button: Scroll to adjust volume
- On Speed Button: Scroll to cycle speeds
- On Progress Bar: Scroll to seek
- Shift + Scroll on Video: Adjust volume
Supported Pages
Instagram: Posts, Reels, Stories
Facebook: Feed videos, Reels, Watch page (facebook.com, web.facebook.com)
Designed for: Desktop browsers (Chrome, Firefox, Edge)
Installation
- Install a userscript manager:
- Install this script
- Visit Facebook or Instagram and hover over any video
Configuration
All defaults are in the CONFIG object at the top of the script:
| Option |
Default |
Description |
DEFAULT_VOLUME |
0.5 |
Initial volume (0–1) |
DEFAULT_SPEED |
1 |
Initial playback rate |
DEFAULT_MUTED |
true |
Start muted (matches platform behavior) |
SPEEDS |
[0.25–4] |
Available speed options |
SEEK_TIME |
5 |
Seconds to skip with arrow keys |
UI_HIDE_DELAY |
2000 |
Milliseconds before controls auto-hide |
LONG_PRESS_SPEED |
2 |
Speed when holding right arrow |
MIN_VIDEO_WIDTH |
100 |
Minimum px width to attach controls |
MIN_VIDEO_HEIGHT |
100 |
Minimum px height to attach controls |
