Greasy Fork

Doesn't work

Doesn't work because
this document.querySelector('iframe[src^="https://www.youtube.com/embed/"]')
doesn't match this
document.querySelectorAll('iframe[src^="https://youtube.com/embed/"]')

You should use document.querySelector('iframe[src^="https://www.youtube.com/embed/"],iframe[src^="https://youtube.com/embed/"]')
But even this doesn't select more than 1 iframe, so you can't use a for condition to loop after...
this document.querySelector('iframe[src^="https://www.youtube.com/embed/"]').length won't return anything even if there's a match...


I've fully fixed your script! Please release this as an update!
// ==UserScript==
// @name Allow full screen on embedded Youtube
// @namespace mwisnicki@gmail.com
// @match *://*/*
// @grant none
// @version 1.0
// @author mwisnicki@gmail.com
// @description 3/8/2020, 10:42:28 PM
// @run-at document-end
//@noframes
// ==/UserScript==

var iframes = document.querySelectorAll("iframe"); //Get all iframes on the page
for (var i = iframes.length; i--;) { //Starts the for condition
if (iframes[i].src.match('youtube') !== null && iframes[i].src.match('allow') === null) //If the iframe has an YT link and if the iframe link doesn't have the allow attribute
{ //Starts the if condition
iframes[i].allowFullscreen = true; //Add the permission to open in full scree
iframes[i].src = iframes[i].src; //Reload the iframe to make the iframe have the new permission
} //Finishes the if condition
} //Finishes the for condition


This line is actually needless
iframes[i].src = iframes[i].src; //Reload the iframe to make the iframe have the new permission

This won't work with dynamic pages. Also need example URL as per latest comment.
I've added github link to latest script to facilitate better collaboration.

I don't have an account on github.

Thanks for the update, it works now, I'm just not sure if works for pages that have more than 1 youtube video iframed...

I see no reason why it wouldn't. Please update your rating.

Open any page that has 2 or more youtube iframes and paste this on the console
const URLs = [
"https://www.youtube.com/embed/",
"https://youtube.com/embed/",
"https://www.youtube-nocookie.com/embed/"
];

Then this

URLs.length, if this returns only 1 then the script would work only for the 1 iframe, and the for condition would be needless.

Please give specific URL

Open any page that has 2 or more youtube iframes and paste this on the console
const URLs = [
"https://www.youtube.com/embed/",
"https://youtube.com/embed/",
"https://www.youtube-nocookie.com/embed/"
];

Then this

URLs.length, if this returns only 1 then the script would work only for the 1 iframe, and the for condition would be needless.

This makes zero sense.

You are right, actually I meant the variable iframes, but I've tested that and it's returning more than 1 so it's okay. The for condition works and is really needed here.

I think you could improve the code erasing the whole function forceReloadIframe and replacing that by 1 single line
iframe.src = iframe.src; //Reload the iframe to make the iframe have the new permission
//Replace this line forceReloadIframe(iframe); with the line above if you want

But this isn't important and isn't a big deal either, your code is working so it's fine as it is too

I recall having some issue with simply reassigning src but couldn't reproduce it on ign.com so I've simplified reload as suggested.

Thanks, but actually I meant this. (Is basically the exact same thing you did anyways)


const iframes = document.body.querySelectorAll(SELECTOR)
for (const iframe of iframes) {
iframe.setAttribute("allowfullscreen","");
iframe.src = iframe.src;
console.log("Forced Youtube allowfullscreen on %o", iframe);
}


But now only the first yt iframe is reloaded, though the code works fine if executed on the console...
That's probably because you are executing the function for every single mutation in the page, instead of doing this you could just have used window.onload

https://myanimelist.net/forum/?topicid=1894279


// ==UserScript==
// @name Allow full screen on embedded Youtube
// @namespace mwisnicki@gmail.com
// @homepage https://github.com/mwisnicki/userscripts/blob/master/allowfullscreen-youtube-embed.user.js
// @match *://*/*
// @grant none
// @version 6
// @author mwisnicki@gmail.com
// @description ViolentMonkey script
// ==/UserScript==

window.onload = function() { //Starts the function when the website finished loading
const URLs = [
"https://www.youtube.com/embed/",
"https://youtube.com/embed/",
"https://www.youtube-nocookie.com/embed/"
];

const SELECTOR = URLs.map(url => `iframe[src^="${url}"]:not([allowfullscreen])`).join(', ');

const iframes = document.body.querySelectorAll(SELECTOR)
for (const iframe of iframes) {
iframe.setAttribute("allowfullscreen","");
iframe.src = iframe.src;
console.log("Forced Youtube allowfullscreen on %o", iframe);
}
}; //Finishes the onload function


Now this version I made of your script always does correctly reload the iframe to apply the allowfullscreen attribute

On the link you provided both videos get working fullscreen button with the script enabled.
I'm not sure why you keep thinking the loop would only execute for one element.

The fix has to run for every mutation because of websites that add iframes with javascript after onload (essentially any SPA).

On the link you provided both videos get working fullscreen button with the script enabled.

Only sometimes, reload the page a few times and try a few times and you will see that the script is not always executed on the correct timming, this makes the second video not reload, so even though the allowfullscreen attribute is added to the second video iframe, because the video is not reloaded is the same as nothing...

I'm not sure why you keep thinking the loop would only execute for one element.

Because your previous versions didn't work well at this point, but now this but is fixed!

Got it. But you should also wrap everything inside the window.onload advent listener, otherwise as I said your script will add the allowfullscreen attribute to all iframes, but won't always correctly reload the other iframes (besides the first iframe)

Doesn't work here
https://chrome.google.com/webstore/detail/tabli/igeehkedfibbnhbfponhjjplpkeomghi

I believe Chrome disables all extensions on Chrome WebStore for security reasons.

I'm using opera

*I've just created a script that shows an alert() and that worked on that page...

Seems working perfectly now?
Test link:
https://myanimelist.net/forum/?topicid=1894279
https://chrome.google.com/webstore/detail/tabli/igeehkedfibbnhbfponhjjplpkeomghi

Have you some others test links?

new MutationObserver
This code just makes any script run a bunch of times when the page is still loading and usually this makes the page loading time much much slower, to fix this just wrap that mutation observer inside window.onload function (){}

@decembre
Yeah,I think it works perfectly now, but is still being executed much more than needed while the page is loading, the only problem of this is that the page loading could be greatly delayed, but it's working so I guess it's fine.
Of the author doesn't do the modification I suggested above, you can do it yourself if you want.

No, I could look for other links, but I probably won't look for urls with a bunch of YT embedded videos, because the script is probably working now on any website, besides the chrome store...
I will check your chrome store link to see if it works or not,thanks for that link.

Requires pages to be reloaded a lot of times just to make the script finally work

https://chrome.google.com/webstore/detail/tabli/igeehkedfibbnhbfponhjjplpkeomghi

Please do as I said, isn't that hard to wrap the mutation observer inside the window.onload is it?