SB visual overlay

README.md

SB Visual overlay

Proof of concept!

Blocks/Blurs social media bar in the following video over the full video length
https://www.youtube.com/watch?v=SKSY1juX2ao

Before:

After:

z_sb-visual-overlay.user.js

// ==UserScript==
// @name         SB Visual overlay example
// @namespace    sb.visual-overlay.example
// @version      1.0.0
// @description  Visual overlay test
// @author       Nanobyte
// @match        https://www.youtube.com/watch?*v=SKSY1juX2ao*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @grant        none
// @run-at       document-end
// @noframes
// ==/UserScript==

// video size: 1920x1080
// overlay pixel size: 1920x84
// overlay pixel position: 0x951
// overlay percent size: 100%x7.777%
// overlay percent position: 0%x88.0555%

const overlay = {
  x: 0,
  y: 88.0555,
  width: 100,
  height: 7.777,
};

const overlayEl = document.createElement('div');
overlayEl.style.position = 'absolute';
overlayEl.style.top = `${overlay.y}%`;
overlayEl.style.left = `${overlay.x}%`;
overlayEl.style.width = `${overlay.width}%`;
overlayEl.style.height = `${overlay.height}%`;
overlayEl.style.backdropFilter = 'blur(8px)';
overlayEl.style.zIndex = 10;

function inject() {
  const container = document.querySelector('.html5-video-player');
  container.style.position = 'relative';
  container.appendChild(overlayEl);
}

setTimeout(inject, 100);