Skip to content

Instantly share code, notes, and snippets.

@ItsCinnabar
Created April 14, 2021 12:41
Show Gist options
  • Save ItsCinnabar/ebcfe4f6b3ea7d224a8e1ef0783edeb2 to your computer and use it in GitHub Desktop.
Save ItsCinnabar/ebcfe4f6b3ea7d224a8e1ef0783edeb2 to your computer and use it in GitHub Desktop.
Element youtube preview fix
// ==UserScript==
// @name Element youtube preview
// @namespace http://tampermonkey.net/
// @version 0.1
// @description fix the embeds!!
// @author Cinnabar
// @match https:// url here .com
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant GM.xmlHttpRequest
// @connect youtube.com
// @connect youtu.be
// ==/UserScript==
(function() {
'use strict';
function previewEditor() {
const allPreviews = document.getElementsByClassName('mx_LinkPreviewWidget_caption');
for (const preview of allPreviews) {
const linkTitle = preview.childNodes[0].children[0];
const linkDesc = preview.childNodes[2]
if (linkTitle.text != "Before you continue to YouTube") {
continue
}
GM.xmlHttpRequest({
method: "GET",
url: linkTitle.href,
onload: function(response) {
if (response.status == 200){
const title = response.responseText.match(/<title[^>]*>([^<]+)<\/title>/)[1];
const desc = response.responseText.match(/<meta name="description" content="(.*?)">/)[1];
linkTitle.text = title
linkDesc.textContent = desc
}
}
});
}
}
setInterval(previewEditor,2000);
})();
@htdhnsdjetsr
Copy link

cool idea but for me it does not work

@ItsCinnabar
Copy link
Author

ItsCinnabar commented Apr 14, 2021

cool idea but for me it does not work

Works on my machine.

Did you forget to edit the match url?

Great bug report btw, really helps me to see what's going wrong on your end.

@htdhnsdjetsr
Copy link

I have violentmonkey, I edited the match url to my element, I added a alert box which didnt work in violentmonkey at all, then I added tampermonkey to see if this works, the alert was shown but still no preview was changed at all, also not seeing anything in the js console

@tepiloxtl
Copy link

Works for me here with Tampermonkey on Edge

@bertiebaggio
Copy link

Wee note: refresh after saving the userscript

@bertiebaggio
Copy link

The preview images can be filled in too (<meta property="og:image"> element). I'm no DOM tweaker by trade, but my crude attempt works so far:

https://gist.github.com/bertiebaggio/9ffe0e6e54d903c3be82cb2137aa5b3b

@ItsCinnabar
Copy link
Author

Thanks bertie!

Not sure otter, maybe try with tampermonkey as it seems to work for the rest of us with that? I've never used violent monkey it might be slightly different.

@htdhnsdjetsr
Copy link

yeah that fixed it, got it working now! thank you guys so much <3

@cketti
Copy link

cketti commented May 20, 2021

Thanks for the script ❤️

I modified it to use Youtube's oEmbed API: https://gist.github.com/cketti/edbf7efe5e641792d56a384dc501ba1e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment