Instantly open YouTube links in an embedded iframe overlay player
// ==UserScript==
// @name YouTube Embed Overlay
// @namespace WW91VHViZSBFbWJlZCBPdmVybGF5
// @version 1.2
// @description Instantly open YouTube links in an embedded iframe overlay player
// @author smed79
// @license GPLv3
// @icon https://i25.servimg.com/u/f25/11/94/21/24/ytl2eo11.png
// @match https://*/*
// @exclude https://*.youtube.com/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
// Regex to detect YouTube video IDs in links
const ytRegex = /(?:https?:\/\/)?(?:m|www\.)?(?:youtube\.com\/watch\?v=|youtube\.com\/embed\/|youtu\.be\/(?:watch\?v=)?|youtube-nocookie\.com\/embed\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/;
// Disable autoplay in site embeds
function disableAutoplayInEmbeds() {
document.querySelectorAll('iframe[src*="youtube.com/embed"]').forEach(iframe => {
iframe.src = iframe.src.replace(/(\?|&)autoplay=1/, '');
});
}
disableAutoplayInEmbeds();
new MutationObserver(disableAutoplayInEmbeds).observe(document.body, { childList: true, subtree: true });
// Suppress site popups if they try to open YouTube videos
document.addEventListener('click', e => {
const trigger = e.target.closest('.mfp-link, .fancybox, [data-fancybox]');
if (trigger) {
const href = trigger.getAttribute('href') || trigger.dataset.src || '';
if (ytRegex.test(href)) {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
console.log('YouTube popup suppressed, userscript overlay will show instead');
const match = href.match(ytRegex);
if (match) createOverlay(match[1]);
}
}
}, true); // capture phase ensures this runs before site handlers
// Create overlay with YouTube iframe
function createOverlay(videoId) {
const overlay = document.createElement('div');
overlay.id = 'yt-embed-overlay';
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100vw';
overlay.style.height = '100vh';
overlay.style.backdropFilter = 'blur(8px)';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
overlay.style.zIndex = '9999';
overlay.style.display = 'flex';
overlay.style.justifyContent = 'center';
overlay.style.alignItems = 'center';
overlay.style.flexDirection = 'column';
overlay.style.cursor = 'pointer';
// YouTube iframe with autoplay enabled
const iframe = document.createElement('iframe');
iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=0&cc_load_policy=0&cc_lang_pref=en&hl=en-us&iv_load_policy=3&rel=0&enablejsapi=1`;
iframe.style.width = '98vw';
iframe.style.height = `${(98 / 16) * 9}vw`;
iframe.style.border = '1px solid #f00';
iframe.allow = 'autoplay; encrypted-media';
iframe.allowFullscreen = true;
iframe.onclick = (e) => e.stopPropagation();
// Close button with inline SVG icon
const closeBtn = document.createElement('button');
closeBtn.style.position = 'absolute';
closeBtn.style.top = '12px';
closeBtn.style.right = '12px';
closeBtn.style.background = 'rgba(0, 0, 0, 0.5)';
closeBtn.style.border = 'none';
closeBtn.style.cursor = 'pointer';
closeBtn.style.width = '2.6rem';
closeBtn.style.height = '2.6rem';
closeBtn.style.borderRadius = '50%';
closeBtn.style.padding = '0';
closeBtn.style.display = 'flex';
closeBtn.style.justifyContent = 'center';
closeBtn.style.alignItems = 'center';
closeBtn.style.transition = 'all 0.3s ease';
closeBtn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffc" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
`;
// Hover effects
closeBtn.addEventListener('mouseenter', () => {
closeBtn.style.border = '1px solid #f00';
closeBtn.style.background = 'rgba(0, 0, 0, 0.8)';
closeBtn.style.transform = 'scale(1.2)';
});
closeBtn.addEventListener('mouseleave', () => {
closeBtn.style.background = 'rgba(0, 0, 0, 0.5)';
closeBtn.style.transform = 'scale(1)';
});
closeBtn.onclick = (e) => {
e.stopPropagation();
overlay.remove();
};
// Close overlay when clicking outside iframe
overlay.onclick = (e) => {
if (e.target === overlay) overlay.remove();
};
// Close overlay with Escape key
document.addEventListener('keydown', function escHandler(e) {
if (e.key === 'Escape') {
const el = document.getElementById('yt-embed-overlay');
if (el) el.remove();
}
});
overlay.appendChild(iframe);
overlay.appendChild(closeBtn);
document.body.appendChild(overlay);
}
// Attach listeners to YouTube links
function attachListeners() {
document.querySelectorAll('a[href]').forEach(link => {
if (link.dataset.ytEmbedBound) return;
const match = link.href.match(ytRegex);
if (match) {
link.addEventListener('click', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
createOverlay(match[1]);
});
link.dataset.ytEmbedBound = 'true';
}
});
}
attachListeners();
const observer = new MutationObserver(attachListeners);
observer.observe(document.body, { childList: true, subtree: true });
})();