☰

youtube-playlist-randomizer improvements

changes the background of the youtube-playlist-randomizer website with a random Unsplash image

As of 2025-05-24. See the latest version.

// ==UserScript==
// @name         youtube-playlist-randomizer improvements
// @namespace    lat.netne.net
// @version      0.6
// @include      https://youtube-playlist-randomizer.bitbucket.io*
// @description  changes the background of the youtube-playlist-randomizer website with a random Unsplash image
// @author       Original by Warsoldier, improved for youtube-playlist-randomizer by r5ne
// @grant        none
// @license      GPL-3.0-only
// ==/UserScript==

// Remove from here to the blank comment to disable centering the website.
const style = document.createElement('style');
style.textContent = `
  html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    display: flex; flex-direction: column;
    align-items: center; /* horizontal center */
    text-align: center;
  }
  body {
    margin: 0;
  }
  /* Make all DIVs wrap/center nicely */
  body > div {
    width: auto;
    max-width: 100%;
  }
  /* Let the YouTube iframe keep its own width/height */
  iframe {
    display: block;
    margin: 1em 0;
    flex: 0 0 auto; /* no shrink, no grow */
  }
`;
document.head.appendChild(style);
//

window.addEventListener('load', BG_change);

const UNSPLASH_ACCESS_KEY = '123abc'; // Replace this with your actual Unsplash Access Key for better backgrounds, otherwise picsum will be used for images.

function BG_change() {
  fetch(`https://api.unsplash.com/photos/random?client_id=${UNSPLASH_ACCESS_KEY}&query=landscape&orientation=landscape`) // Change the 'landscape' after query to any style of background you want.
    .then(res => {
      if (!res.ok) throw new Error(`Unsplash API responded with status ${res.status}`);
      return res.json();
    })
    .then(photo => {
      const rawUrl = photo.urls.raw;
      const finalUrl = `${rawUrl}&w=1920&h=1080&fit=crop&crop=entropy`;  // Adjust for greater resolutions/to fit your monitor ratio
      console.log(`Original: ${photo.width}x${photo.height}`);
      console.log(`Using cropped URL: ${finalUrl}`);

      document.body.style.backgroundImage = `url("${finalUrl}")`;
      document.body.style.backgroundSize = 'cover';
      document.body.style.backgroundRepeat = 'no-repeat';
      document.body.style.backgroundPosition = 'center';
      document.documentElement.style.minHeight = '100vh';
      document.body.style.minHeight            = '100vh';
      document.body.style.margin               = '0';
    })
    .catch(err => {
      console.error('Could not fetch Unsplash image:', err);
      document.body.style.backgroundImage = `url("https://picsum.photos/1920/1080")`;
    });
}