Script GreaseMonkey per filmati Youtube

Visto che evidentemente non poteva essere aggiunto per tutti sul forum, mi sono messo e ho scritto uno script per GreaseMonkey che sostituisce al caricamento delle pagine del forum gli embed diretti a youtube con un immagine di anteprima, molto più leggera, che quando cliccata apre esclusivamente il video interessato, riducendo in questo modo il terribile lag che viene a crearsi caricando su dispositivi non troppo performanti decine di applicazioni flash in contemporanea.

L'ho appena finito e testato e potrebbe avere diversi bug nascosti, se qualcuno interessato nota qualcosa è pregato cortesemente di segnalarmi il tutto.  

Ecco lo script:

Codice:

// ==UserScript==
// @name        AteiItalianiYT
// @namespace   boh
// @include     http://atei.forumitalian.com*
// @version     1
// @grant       none
// ==/UserScript==
function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match&&match[7].length==11){
        return match[7];
    }else{
        return 0;
    }
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++)
{
    for(var j = 0; j < divs[i].children.length; j++)
    {
        if(divs[i].children[j].nodeName == "EMBED")
        {
            var video = document.createElement('div');
            var image = document.createElement('img');
            var width = divs[i].children[j].getAttribute('width');
            var height = divs[i].children[j].getAttribute('height');
            var source = youtube_parser(divs[i].children[j].getAttribute('src'));
            video.setAttribute('style', 'width: 320px; height: 220px; background-color: #000000');
            video.setAttribute("onclick", "this.setAttribute('style', 'width: " + width + "px; height: " + height + "px'); var video = document.createElement('embed'); video.setAttribute('width', '" + width + "'); video.setAttribute('height', '" + height + "'); video.setAttribute('scale', 'exactfit'); video.setAttribute('quality', 'high'); video.setAttribute('wmode', 'transparent'); video.setAttribute('type', 'application/x-shockwave-flash'); video.setAttribute('src', 'http://www.youtube.com/v/" + source + "'); video.setAttribute('pluginspace', 'http://www.macromedia.com/go/getflashplayer'); this.innerHTML=''; this.appendChild(video); this.onclick='';");
            image.setAttribute('style', 'margin-top: 20px; margin-bottom: 20px');
            image.src = "http://img.youtube.com/vi/" + source + "/mqdefault.jpg";
            divs[i].replaceChild(video, divs[i].children[j]);
            divs[i].children[j].appendChild(image);
        }
    }
}

Enjoy!

Grazie, ma, scusa per l'ignoranza  dove e come andrebbe messo? 

Meglio ancora sarebbe un esempio pratico

Ah, sopra ho cannato il link a GreaseMonkey, adesso l'ho corretto.
Al link si può installare questo famoso plugin, per firefox ma anche per altre piattaforme se non sbaglio, che permette in generale di far partire al caricamento di pagine specifiche uno script che effettua delle modifiche alla pagine visualizzata.

Poi basta semplicemente creare un nuovo script con il codice di sopra e BAM, funziona  
Per crearlo si va nelle opzioni del plugin stesso, crea nuovo plugin, ecc...
L'installazione può variare un pò da piattaforma a piattaforma ma l'idea è la stessa e su google si trovano sicuramente delle guide su come fare.

Funziona più o meno così:
Al caricamento di una pagina che contiene un contenuto di questo tipo:

Lo script lo sostituisce con un anteprima in questo modo:


Che quando cliccata sopra apre il contenuto che era stato rimpiazzato.

Il vantaggio è che appunto vengono caricate solo delle immagini e il video singolo lo carichi tu quando desideri con un click.