Greasy Fork

Change embed video into thumbnail link

I don't need embed videos for yt and found an add-on 'YouTube Embed2Link' that replaces it with thumbnail link with title of the video. I would like to get rid of it and use it as a script. I found that script inside:

const GOOGLE_API_KEY = "AIzaSyAckH3jasRbe8gTqwAQSVrmidcdrTgsmPk";
const QUALITYMAP = {
low: "default",
default: "default",
medium: "medium",
high: "high",
hqDefault: "high",
};

function qualityKey() {
return QUALITYMAP[self.options.pref.thumbnailQuality];
}

function replaceWithThumbnail ( info )
{
let tn = document.createElement("a");
tn.href = self.options.pref.url.replace("%vid%", info.id);

tn.className = "embed2yt-thumbnail";

// Start of workaround for https://bugzil.la/1107240
tn.style.padding = "0px";
tn.style.boxSizing = "border-box";
tn.style.display = "block";
tn.style.overflow = "none";
tn.style.whiteSpace = "nowrap";
tn.style.color = "white";
tn.style.textDecoration = "none";
tn.style.font = "1.7em helvetica";
tn.style.textAlign = "left";
tn.style.backgroundColor = "black";
tn.style.backgroundSize = "6em, cover";
tn.style.backgroundRepeat = "no-repeat, no-repeat";
tn.style.backgroundPosition = "center center";
tn.style.backgroundRepeat = "no-repeat, no-repeat";
// End of workaround

tn.style.width = info.width;
tn.style.height = info.height;

info.replace.parentNode.insertBefore(tn, info.replace);
info.replace.parentNode.removeChild(info.replace);

var url = "https://www.googleapis.com/youtube/v3/videos?part=snippet" +
"&id=" + info.id +
"&key=" + GOOGLE_API_KEY;
let req = new XMLHttpRequest();
req.open('GET', url);

req.responseType = "json";
req.onload = function(e) {
var t = document.createElement("div");
var data = req.response.items[0];
console.log(data);
t.textContent = data.snippet.title;
t.className = "embed2yt-title";

// Start of workaround for https://bugzil.la/1107240
t.style.background = "hsla(0, 0%, 0%, 0.5)";
t.style.padding = "0 0.4em";
// End of workaround

tn.appendChild(t);

var thumb = data.snippet.thumbnails[qualityKey()];

tn.style.backgroundImage = "url("+self.options.playIcon+")," +
"url("+thumb.url+")";
};
req.send();
}

var ytre = new RegExp("^(https?://)(www\\.)?youtube(-nocookie)?.com/embed/([^/?#&]*).*$","i");
var oytre = new RegExp("^(https?://)(www\\.)?youtube(-nocookie)?.com/v/([^/?#&]*).*$","i");

function scanElement(ele)
{
var infolist = [];

var frames = ele.getElementsByTagName("iframe");
for ( i in frames )
{
var f = frames[i];
if ( f.tagName != "IFRAME" ) continue; // We are also getting properties.
var r = f.src.match(ytre);
if (r)
{
infolist.push({
id: r[4],
replace: f,
width: f.width + "px",
height: f.height + "px",
});
}
}

var objects = ele.getElementsByTagName("object");
for ( i in objects )
{
var o = objects[i];
if ( o.tagName != "OBJECT" ) continue; // We are also getting properties.
var e = o.getElementsByTagName("embed")[0];

var url;
if (e) url = e.src;
else if (o.data) url = o.data;
else url = "";

var r = url.match(oytre);
if (r)
{
infolist.push({
id: r[4],
replace: o,
width: o.width + "px",
height: o.height + "px",
});
}
};

for ( i in infolist )
replaceWithThumbnail(infolist[i]);
}

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
scanElement(mutation.target);
});
});

// pass in the target node, as well as the observer options
observer.observe(document, { childList: true, subtree: true });

Of course it wouldn't work like this while 'self.options.pref.thumbnailQuality' should be replaced by 'hqDefault' and 'self.options.pref.url.replace' with '//www.youtube.com/watch?v=%vid%' while that values can be changed in add-on options. After that works only partially. The embed video is replaced with a frame with title, but thumbnail isn't displayed and link isn't proper.

Could someone help me fix that script that would work? Additionally I would like a change that click with left mouse button would open video in new tab instead of in current one.

I wrote a userscript for exactly this purpose.

From the description I can see it's not exactly the same what I need. Your script is too much complicated and gives functions I don't need. But could you help me fix that simple code?

Well, if you stopped at reading the description and didn't even try it, which would take less than a minute, then I'm certainly not going to spend much more time than that trying to figure out what's wrong with the script you posted :-) I remember there were many odd cases with youtube thumbnail substitution I had to account for in my script.

Ok. I've just tried it and doesn't work at all for me (not surprised). That script I posted at least works partially, just needs little adjusting.

Why aren't you surprised? I am. It works for me in FF52. Well, whatever, someone else will help you, I'm sure.