Enable the Built-In PiP button on Youtube Media Control

Enable the built-in Picture-in-Picture (PiP) button (with custom SVG) in the Youtube Media player.

当前为 2023-04-10 提交的版本，查看最新版本。

换行

// ==UserScript==
// @name        Enable the Built-In PiP button on Youtube Media Control
// @namespace   http://youtube.com/
// @version     1.1
// @description Enable the built-in Picture-in-Picture (PiP) button (with custom SVG) in the Youtube Media player.
// @match       *://www.youtube.com/*
// @grant       none
// @author      jayzee8bp
// @icon        https://www.youtube.com/s/desktop/932eb6a8/img/favicon.ico
// @license     MIT
// ==/UserScript==

(function() {
    'use strict';

    // make the button visible
    var pip_button = document.querySelector("#movie_player > div.ytp-chrome-bottom > div.ytp-chrome-controls > div.ytp-right-controls > button.ytp-pip-button.ytp-button")
    pip_button.removeAttribute('style');

    // edited svg from https://www.svgrepo.com/svg/347276/picture-in-picture
    pip_button.innerHTML = '<svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff" transform="matrix(1, 0, 0, -1, 0, 0)" stroke="#000000" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path fill="none" d="M0 0h24v24H0z"></path> <path fill-rule="nonzero" d="M21 3a1 1 0 0 1 1 1v7h-2V5H4v14h6v2H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zm0 10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h8zm-1 2h-6v4h6v-4z"></path> </g> </g></svg>';

    // transform the svg into suitable size
    pip_button.querySelector('svg').style.transform = 'scale(0.62,-0.62)';
})();

欢迎访问Greasy Fork镜像