31 lines
No EOL
1.3 KiB
JavaScript
31 lines
No EOL
1.3 KiB
JavaScript
// ==UserScript==
|
|
// @match https://m.youtube.com/*
|
|
// @name Picture-in-Picture for mobile YouTube
|
|
// @description Adds a PiP button on m.youtube.com's toolbar.
|
|
// @grant none
|
|
// @version 0.1.0
|
|
// @author KaKi87
|
|
// @license MIT
|
|
// @namespace https://git.kaki87.net/KaKi87/userscripts/src/branch/master/youtubePictureInPicture
|
|
// ==/UserScript==
|
|
|
|
const buttonElement = document.createElement('button');
|
|
buttonElement.setAttribute('style', `
|
|
-webkit-mask: url("https://raw.githubusercontent.com/phosphor-icons/core/refs/heads/main/assets/light/picture-in-picture-light.svg") right center / auto 75% no-repeat;
|
|
background-color: white;
|
|
align-self: stretch;
|
|
flex: 1;
|
|
`);
|
|
buttonElement.addEventListener('click', () => {
|
|
const videoElement = document.querySelector('video');
|
|
videoElement.removeAttribute('disablePictureInPicture');
|
|
videoElement.requestPictureInPicture();
|
|
});
|
|
|
|
const observer = new MutationObserver(() => {
|
|
const buttonContainerElement = document.querySelector('.mobile-topbar-header-content');
|
|
if(window.location.pathname !== '/watch' || !buttonContainerElement || buttonContainerElement.contains(buttonElement)) return;
|
|
buttonContainerElement.prepend(buttonElement);
|
|
});
|
|
|
|
observer.observe(document.documentElement, { subtree: true, childList: true }); |