Skip to content

Instantly share code, notes, and snippets.

@MRuy
Created May 14, 2021 14:14
Show Gist options
  • Save MRuy/f62bfefe8a0c6e0601a28478f6ec62f2 to your computer and use it in GitHub Desktop.
Save MRuy/f62bfefe8a0c6e0601a28478f6ec62f2 to your computer and use it in GitHub Desktop.
SB visual overlay
// ==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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment