☰

YT P-I-P

Adds a picture in picture button to youtube videos.

// ==UserScript==
// @name         YT P-I-P
// @namespace    none
// @version      0.1
// @description  Adds a picture in picture button to youtube videos.
// @author       Beastwick18
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==
function pip() {

    }
(function() {
    'use strict';


    var rightControls = document.getElementsByClassName('ytp-right-controls')[0];
    rightControls.lastChild.insertAdjacentHTML('beforebegin','<button class="ytp-popout-button ytp-button" aria-label="Picture-in-picture" title="Picture-in-picture" id="popout-player-control-button" onclick=""><svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1"><use class="ytp-svg-shadow" xlink:href="#ytp-svg-pop-frame"></use><path id="ytp-svg-pop-frame" d="m 9,10 v 16 h 18 v -4 h -2 v 2 H 11 V 12 h 3 v -2 z" class="ytp-svg-fill"></path><use class="ytp-svg-shadow" xlink:href="#ytp-svg-pop-popout"></use><path id="ytp-svg-pop-popout" d="M 16,9 V 20 H 28 V 9 Z m 2,2 h 8 v 7 h -8 z" class="ytp-svg-fill"></path></svg></button>');

    var pipButton = document.getElementById("popout-player-control-button");
    pipButton.addEventListener('click',() => {
        if (document.pictureInPictureElement) {
            document.exitPictureInPicture();
            pipButton.style = "background: none;";
        } else {
            document.getElementsByTagName('video')[0].requestPictureInPicture();
            pipButton.style = "background: rgba(255,255,255,.3);";
        }
    })

    document.addEventListener("leavepictureinpicture", e => {
        pipButton.style = "background: none;";
    });
})();