YouTube Popup Window

Enhances YouTube with a popup window feature.

As of 2023-05-25. See the latest version.

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.

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

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 Popup Window
// @name:zh-TW          YouTube Popup Window
// @name:ja             YouTube Popup Window
// @namespace           http://tampermonkey.net/
// @version             0.1.2
// @description         Enhances YouTube with a popup window feature.
// @description:zh-TW   透過彈出視窗功能增強YouTube。
// @description:ja      YouTubeをポップアップウィンドウ機能で強化します。
// @author              CY Fung
// @license             MIT
// @match               https://www.youtube.com/*
// @icon                https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant               GM_registerMenuCommand
// @allFrames
// ==/UserScript==

(function $$() {
    'use strict';
    const winName = 'x4tGg';
    const styleName = 'rCbM3';

    if (window.name === winName && window === top) {

        if (!document.head) return requestAnimationFrame($$);

        let style = document.createElement('style');
        style.id = styleName;

        style.textContent = `
        *[class][id].style-scope.ytd-watch-flexy {
            min-width: unset !important;
            min-height: unset !important;
        }
        `

        document.head.appendChild(style);

    } else if (window !== top && top.name === winName) {


        if (!document.head) return requestAnimationFrame($$);

        let style = document.createElement('style');
        style.id = styleName;

        style.textContent = `
        * {
            min-width: unset !important;
            min-height: unset !important;
        }
        `

        document.head.appendChild(style);


    } else if (window === top) {

        function openPopup() {
            var currentUrl = window.location.href;
            let rect = document.querySelector('ytd-app').getBoundingClientRect();
            let w = rect.width;
            let h = rect.height;
            var popupOptions = `toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=${w},height=${h}`;


            let video = document.querySelector('#player video');

            if (video) {
                video.pause();
            }
            let win = window.open(currentUrl, '', popupOptions);
            win.name = winName;


            document.querySelector('#x4tGg').remove();

        }



        GM_registerMenuCommand('Open Popup Window', function () {

            if (document.querySelector('#x4tGg')) return;

            let div = document.body.appendChild(document.createElement('div'));
            div.id = 'x4tGg';
            div.textContent = 'Click to Open Popup'

            Object.assign(div.style, {
                'position': 'fixed',
                'left': '50vw',
                'top': '50vh',
                'padding': '28px',
                'backgroundColor': 'rgb(56, 94, 131)',
                'color': '#fff',
                'borderRadius': '16px',
                'fontSize': '18pt',
                'zIndex': '9999',
                'transform': 'translate(-50%, -50%)'
            })

            div.onclick = function () {

                openPopup();
            }

        });

    }
    // Your code here...
})();