Youtube Pause On Start

Pause Youtube video on start.

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 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 Pause On Start
// @namespace    http://tampermonkey.net/
// @version      2024-03-02
// @description  Pause Youtube video on start.
// @author       Santeri Hetekivi
// @match        *://*.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @license      Apache-2.0
// ==/UserScript==

(function () {
    'use strict';
    /**
     * Get element with selector and call callback with it.
     * @param {string} selector Selector for the element.
     * @param {function} callback Callback function to call with the element.
     */
    function forElement(selector, callback) {
        // Init forElement.timeoutCount.
        if (forElement.timeoutCount === undefined) {
            forElement.timeoutCount = {}
        }
        // Init forElement.timeoutCount[selector].
        if (forElement.timeoutCount[selector] === undefined) {
            forElement.timeoutCount[selector] = 0
        }

        // Get element.
        const element = document.querySelector(selector)

        // If element not found.
        if (element === null) {
            // try again after timeout.
            setTimeout(
                function () {
                    forElement(selector, callback)
                },
                (
                    // Base timeout.
                    100
                    *
                    // Increase timeout after each try.
                    (forElement.timeoutCount[selector]++)
                )
            )
        }
        // If element found
        else {
            // reset timeout count
            forElement.timeoutCount[selector] = 0
            // and call callback with element.
            callback(element)
        }
    }

    // Init previous video ID.
    let videoIdCurr = null;

    // Init paused video ID.
    let videoIdPaused = null

    // Init video element.
    let videoElement = null

    /**
     * On playing event.
     */
    function onPlaying() {
        // If video ID has not changed from last paused one
        if (videoIdPaused === videoIdCurr) {
            // just return.
            return
        }

        // Pause video
        videoElement.pause()

        // Update paused video ID.
        videoIdPaused = videoIdCurr
    }

    /**
     * Run on url change.
     */
    function onUrlChange() {
        // Get video id from url.
        const videoIdNew = (new URLSearchParams(window.location.search)).get("v");
        // If
        if (
            // did not get video id
            videoIdNew === null
            ||
            // or video id did not change
            videoIdNew === videoIdCurr
        ) {
            // just return.
            return
        }

        // Update previous video id.
        videoIdCurr = videoIdNew;

        // Run for
        forElement(
            // video element that has src attribute
            "video[src]",
            function (video) {
                // If video element is set
                if (videoElement) {
                    // remove event listener from video element.
                    videoElement.removeEventListener("playing", onPlaying);
                }
                
                // Update video element.
                videoElement = video
                
                // Add event listener to video element
                videoElement.addEventListener("playing", onPlaying);
            }
        )
    }

    // Add event listener for
    window.addEventListener(
        // Youtube page data updated event.
        'yt-page-data-updated',
        function () {
            onUrlChange();
        }
    );

    // Run on url change once on first load.
    onUrlChange();
})();