☰

YouTube ID Verification Warning (Animated MDL Popup)

Shows an animated Material Design Lite popup warning about YouTube ID verification

Ekde 2025/08/13. Vidu La ĝisdata versio. 

/// ==UserScript==
// @name         YouTube ID Verification Warning (Animated MDL Popup)
// @namespace    https://greasyfork.org/en/users/yourname
// @version      1.1
// @description  Shows an animated Material Design Lite popup warning about YouTube ID verification
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Inject MDL and dialog polyfill styles
    const mdlCSS = document.createElement('link');
    mdlCSS.rel = 'stylesheet';
    mdlCSS.href = 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css';
    document.head.appendChild(mdlCSS);

    const polyfillCSS = document.createElement('link');
    polyfillCSS.rel = 'stylesheet';
    polyfillCSS.href = 'https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.css';
    document.head.appendChild(polyfillCSS);

    // Add custom animation styles
    const style = document.createElement('style');
    style.textContent = `
        @keyframes fadeScaleIn {
            0% { opacity: 0; transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }
        dialog {
            border: none;
            border-radius: 8px;
            padding: 20px;
            max-width: 420px;
            width: 90%;
            animation: fadeScaleIn 0.4s ease-out;
        }
        .mdl-dialog__title {
            font-size: 1.3em;
            margin-bottom: 15px;
        }
        .mdl-dialog__content {
            font-size: 14px;
            line-height: 1.5;
        }
    `;
    document.head.appendChild(style);

    // Inject MDL and dialog polyfill scripts
    const mdlJS = document.createElement('script');
    mdlJS.src = 'https://code.getmdl.io/1.3.0/material.min.js';
    document.head.appendChild(mdlJS);

    const polyfillJS = document.createElement('script');
    polyfillJS.src = 'https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js';
    document.head.appendChild(polyfillJS);

    polyfillJS.onload = function () {
        const dialog = document.createElement('dialog');
        dialog.id = 'ytIDWarningDialog';
        dialog.innerHTML = `
            <h4 class="mdl-dialog__title">⚠ YouTube ID Verification Required</h4>
            <div class="mdl-dialog__content">
              <p>
                YouTube may require you to verify your ID to continue watching certain videos.
                This process can include submitting personal information and documents.
              </p>
              <p>
                Make sure you understand the risks before proceeding.
              </p>
            </div>
            <div class="mdl-dialog__actions">
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="proceedBtn">
                I Understand
              </button>
            </div>
        `;
        document.body.appendChild(dialog);

        if (!dialog.showModal) {
            dialogPolyfill.registerDialog(dialog);
        }

        // Show popup after short delay
        setTimeout(() => dialog.showModal(), 1200);

        // Close on proceed
        document.addEventListener('click', e => {
            if (e.target.id === 'proceedBtn') {
                dialog.close();
            }
        });
    };
})();