☰

Custom Image for Youtube Background

Replace the old boring flat background with whatever picture you like

目前為 2024-07-20 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Custom Image for Youtube Background
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.5
  5. // @description  Replace the old boring flat background with whatever picture you like
  6. // @author       Hoover
  7. // @match        *://*.youtube.com/*
  8. // @grant        none
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13.  
  14. // Only tested on dark mode. If you're using light mode, you're a lunatic.
  15.  
  16. (function () {
  17.     'use strict';
  18.  
  19.     // Fill the array up with URLs to pictures
  20.     const bgSources = [
  21.         "https://i.kym-cdn.com/photos/images/original/000/581/296/c09.jpg",
  22.         "https://i.kym-cdn.com/photos/images/original/000/581/296/c09.jpg"
  23.     ]
  24.  
  25.     function getRandomImageUrl(images) {
  26.         const randomIndex = Math.floor(Math.random() * images.length);
  27.         return images[randomIndex];
  28.     }
  29.  
  30.     // Select only one image from the array
  31.     let bgImage = getRandomImageUrl(bgSources);
  32.  
  33.     // Overriding and adding css styles
  34.     let css = `
  35.     ytd-app {
  36.         background-image: url(${bgImage});
  37.         background-attachment: fixed;
  38.         background-size: cover;
  39.         background-repeat: no-repeat;
  40.         background-position: center;
  41.     }
  42.     html[dark],
  43.     [dark] {
  44.         --yt-spec-base-background:#0f0f0fbf;
  45.     }
  46.     #cinematics-container{
  47.         display: none;
  48.     }
  49.     `;
  50.     if (typeof GM_addStyle !== "undefined") {
  51.         GM_addStyle(css);
  52.     } else {
  53.         let styleNode = document.createElement("style");
  54.         styleNode.appendChild(document.createTextNode(css));
  55.         (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  56.     }
  57. })();