YouTube PIP Button(iOS Safari)

Generate PIP button on YouTube Player

Від 18.10.2025. Дивіться остання версія.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(У мене вже є менеджер скриптів, дайте мені встановити його!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         YouTube PIP Button(iOS Safari)
// @version      1.2
// @description  Generate PIP button on YouTube Player
// @match        https://m.youtube.com/*
// @grant        none
// @namespace https://greasyfork.org/users/1405339
// ==/UserScript==

(function() {
    'use strict';

    const controlSelector = '.player-controls-bottom-left';

    function createPipButton(video) {
        const btn = document.createElement('button');
        btn.textContent = '◲';
        Object.assign(btn.style, {
            background: 'rgba(0,0,0,0)',
            color: '#ffffff',
            fontWeight: '0',
            padding: '6px 8px',
            fontSize: '20px',
            userSelect: 'none',
        });
        btn.classList.add('my-pip-btn');
        btn.onclick = e => {
            e.stopPropagation();
            if (!video) return;
            try {
                video.webkitPresentationMode === 'picture-in-picture' ?
                    video.webkitSetPresentationMode('inline') :
                    video.webkitSetPresentationMode('picture-in-picture');
            } catch {
            }
        };
        return btn;
    }

    function injectButtons() {
        const video = document.querySelector('video');
        if (!video) return;

        const roots = [document];
        const host = document.querySelector('ytp-player');
        if (host?.shadowRoot) roots.push(host.shadowRoot);

        roots.forEach(root => {
            root.querySelectorAll(controlSelector).forEach(container => {
                if (!container.querySelector('.my-pip-btn')) {
                    container.appendChild(createPipButton(video));
                }
            });
        });
    }

    new MutationObserver(injectButtons).observe(document.body, {childList: true, subtree: true});
    injectButtons();
})();