Generate PIP button on YouTube Player
As of
// ==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: '8px 8px',
marginBottom: '4px',
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();
})();