Universal Picture-in-Picture Trigger

WHAT IT DOES

Universal Picture-in-Picture Trigger adds a floating button to every HTML5 video on any website, giving you instant access to the browser's native Picture-in-Picture (PiP) mode. With a single click, the video pops out into a small, resizable floating window that stays on top of all other content, allowing you to watch videos while browsing other tabs, reading articles, or working in other applications. The extension works with all HTML5 videos, including those on YouTube, Vimeo, Netflix, Hulu, Twitch, and countless other platforms. A keyboard shortcut (Alt+P by default) lets you toggle PiP mode without reaching for the mouse. The button is fully customizable in position, size, and opacity, and you can enable auto-PiP mode to automatically pop out videos when they start playing. Notifications confirm when PiP is activated or deactivated, and the button changes color to indicate active PiP mode.

WHERE IT RUNS

The extension works on every website with HTML5 video elements, including major streaming platforms, social media sites, online learning portals, video conferencing tools, and any other page with embedded video content. It runs locally in your browser, interacting with the native Picture-in-Picture API which is built into all modern browsers (Chrome, Edge, Firefox, and Opera). The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension automatically adds a floating button to every video on the page. Click the ⧉ button on any video to enter Picture-in-Picture mode—the video will pop out into a floating window. Click the same button again (or close the PiP window) to return the video to its original position. To toggle PiP using the keyboard, press Alt+P (configurable in settings). The button changes from blue to red when PiP is active. Enable "Auto-open PiP on play" in the settings to automatically pop out any video when you start playing it. The extension also displays a brief notification at the bottom of the screen when PiP is activated or deactivated.

THE ACTUAL MECHANISM — PICTURE-IN-PICTURE API WITH WRAPPER-BASED BUTTON INJECTION

The extension uses the HTML5 Video API's Picture-in-Picture methods: `video.requestPictureInPicture()` to enter PiP mode and `document.exitPictureInPicture()` to exit. To check support, it tests `document.pictureInPictureEnabled`. Each video element is wrapped in a `div.bg-pip-video-wrapper` to provide a positioning context for the button overlay. The button is positioned absolutely within this wrapper using the user's preferred position (top-left, top-right, bottom-left, bottom-right). The button listens for click events and toggles PiP mode on the associated video. The extension also attaches listeners to each video's `enterpictureinpicture` and `leavepictureinpicture` events to update the button's visual state (active/inactive) and show notifications. For keyboard shortcuts, the extension captures keydown events globally and checks if the pressed key matches the user's configured shortcut (default: Alt+P). When matched, it finds the largest visible video on the page (by bounding rect area) and toggles PiP for that video. All videos are tracked in an `activeVideos` array to avoid duplicate button injection, and a MutationObserver watches for dynamically added videos to attach buttons automatically.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, refresh button, position selector, size input, opacity input, auto-open toggle, per-site settings, and PiP support indicator—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and storage engine. Picture-in-Picture mode is a browser-native feature and may not be available on all browsers or all video elements (some DRM-protected content may block PiP). Because websites frequently update their video player implementations, certain complex web applications may occasionally require manual refresh using the "Refresh PiP Buttons" button in the panel. The extension will automatically check for updates weekly and notify you when a new version is available. No personal data, browsing history, or video content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.