Auto Picture-in-Picture

A seamless Picture-in-Picture experience for YouTube and Bilibili

Language: English | 中文

Table of Contents

• Table of Contents
• Overview
• Key Features
• Browser Compatibility
• Browser Setup
  • Chrome/Brave/Edge Setup
  • Firefox Setup
  • Enable Developer Mode
• Visual Examples
  • PiP Interface (Chrome with Updated Controls)
• Technical Implementation
• Project Statistics
• Resources
• Support

Overview

An advanced userscript that automatically triggers Picture-in-Picture (PiP) mode for YouTube and Bilibili videos. This script provides a seamless video-watching experience across multiple browsers, enhancing the native PiP functionality with additional features and broader compatibility.

Note: Many browsers now offer native Auto PiP features in beta/experimental mode.

Key Features

Automatic PiP Functionality

Feature	Description
Smart Activation	Automatically enters PiP mode during active video playback
Tab Management	Intelligently handles tab switching with user interaction detection
Pause Handling	Prevents PiP activation during video pauses
Click Optimization	Enhanced click event handling for better user experience
Cross-Browser	Consistent experience across Chrome, Edge, and Brave
Error Resilience	Robust error handling with automatic retry mechanisms

Browser Compatibility

Native Auto PiP Support Status

Browser	Native Auto PiP	Status	Available In
Chrome	✅	Beta	Chrome 137.0.7151.15+
Firefox	✅	Experimental	Firefox 130+
Edge	❓	Beta	Edge 137+ (Chromium-based)
Brave	❓	Beta	Brave 1.63+
Safari	❓	Not Available	-

Browser Setup

Chrome/Brave/Edge Setup

Using Native Auto PiP

1. Enable Auto PiP Feature (Settings)

   Settings → Privacy and Security → Site Settings → Additional Permissions
   

   Enable "Automatically enter Picture-in-Picture mode"

2. Configure Chrome Flags Navigate to chrome://flags and enable:

   • #auto-picture-in-picture-for-video-playback
   • #video-picture-in-picture-controls-update-2024
   • #media-session-enter-picture-in-picture
   • #document-picture-in-picture-animate-resize

⚠️ Important Note for Chrome 137.0.7151.15+ Users: If you're using Chrome Beta 137.0.7151.15 or above, also enable:

• #browser-initiated-automatic-picture-in-picture

With this flag enabled and native Auto PiP configured, this userscript becomes optional as the browser now handles automatic PiP functionality natively.

Firefox Setup

Using Native Auto PiP (Experimental)

1. Enable Experimental Auto PiP Feature

   Type about:settings#experimental in the address bar
   

2. Check the box for "picture-in-picture auto-open on tab switch"

3. For manual PiP control:

   Settings → General → Browsing
   

   Ensure "Enable picture-in-picture video controls (E)" is checked

Zen Browser (Firefox-based)

Zen Browser is based on Firefox and includes similar Auto PiP functionality. The setup process is similar:

1. Navigate to about:settings#experimental in Zen Browser
2. Enable the experimental PiP features
3. For best results, ensure you're using Zen Browser version 120 or higher

Note: Zen Browser often includes additional performance optimizations for video playback, which can enhance the PiP experience.

Enable Developer Mode

Required for userscript installation in all browsers

Visual Examples

Configuration Screenshots

PiP Interface (Chrome with Updated Controls)

Technical Implementation

Advanced Browser APIs

• Utilizes navigator.mediaSession API for PiP control
• Custom action handlers for PiP state management
• Cross-browser compatibility layer
• Intelligent feature detection
• Progressive enhancement approach
• Graceful fallbacks for unsupported browsers

Project Statistics

Star History

Resources

Documentation & References

Resource	Link
Chrome Auto PiP Documentation	Official Docs
Firefox Auto PiP (Experimental)	Firefox Blog
Picture-in-Picture API Specification	W3C Spec
Firefox Picture-in-Picture User Guide	Firefox Support

Support

If you find this userscript helpful, consider supporting its development: