Ho trovato una soluzione abbastanza performante che dovrebbe risolvere il nostro problema e mantenere comunque la praticità della discussione.
Per chiunque volesse informarsi ulteriormente, basta cercare "lazy loading youtube embed video" o qualcosa di simile su internet. In parole povere, consiste nel visualizzare l'anteprima rettangolare del video come sempre, con l'unica differenza che adesso non verrà caricato il filmato finché l'utente non ci cliccherà sopra (praticamente la pagina carica solo i video su richiesta, e non tutti come invece avviene di default).
È molto più semplice vederlo direttamente che descriverlo, quindi vi lascio sotto spoiler uno screenshot (non è un video
) di come verrebbero visualizzati i video in un post, prima e dopo che vengano caricati.
(Sì, è l'anteprima di un video stupidissimo ma ahimè divertentissimo
)
Nel primo caso, l'unica cosa che viene caricata nella pagina è l'immagine di anteprima che youtube crea per ogni video (poche decine di kb), mentre nel secondo bisogna invece caricare tutto il player di youtube e quando in una pagina vi sono 15+ video allora si rischia di dover caircare anche svariati megabyte in più.
Per poter fare ciò, non bisognerà più postare un video come facciamo di solito, cioè con
CODICE
<iframe width="560" height="315" src="https://www.youtube.com/embed/eIo4AvtvSxc" frameborder="0" allowfullscreen></iframe>
Ma con un nuovo codice, ovvero:
CODICE
<div class="youtube" data-id="YOUTUBEID"></div>
YOUTUBEID = ID del video di youtube, ovvero quegli 11 caratteri (possono essere sia lettere che numeri che trattini) che compaiono nel link del video dopo "watch?v" (nel codice precedente ad esempio l'ID era eIo4AvtvSxc). Ad ogni modo se vi è della difficoltà per qualcuno nel riconoscere l'ID di un video si può spendere qualche parola in più.
Questo è tutto per gli utenti. Il resto del messaggio è per Dan o chiunque abbia i permessi di modificare il codice HTML del forum. Lo lascio scritto qua per chi voglia vederlo per curiosità, o magari voglia migliorarlo (perché io sono una sega con il JavaScript e il codice non è mio, l'ho solo opportunamente modificato per il forum[i crediti di chi l'ha creato sono comunque presenti]). Ah, prima di proseguire, volendo io essere un amichevole wrager di quartiere, ho cercato in tutti i modi di scrivere uno script per aggiungere un bottone accanto ai vari bottoni di formattazione (IMG, QUOTE, SPOILER ecc.) che scrivesse in automatico il codice da postare, in modo da rendere più facile l'inserimento del video... MA AHIMÈ non vi sono riuscito e diverse bestemmie sono state buttate fra ieri ed oggi. Se qualcuno di voi fosse in grado di aggiungerlo, avremmo davvero compiuto un piccolo passo per il javascript ma un grande passo per il forum.
Per implementare lo script, bisogna andare nella sezione "Codice HTML che sarà mostrato in FONDO a tutte le pagine" ed incollare quanto segue:
CODICE
<!-- Script per video youtube -->
<script type="text/javascript">
/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">', /* è possibile impostare una risoluzione più alta di default cambiando hddefault in maxresdefault, solo che non tutti i video hanno l'alta risoluzione*/
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("width", "560"); /* ho fissato l'altezza e la larghezza ai classici 560/315 */
iframe.setAttribute("height", "315");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
Bisogna anche aggiungere le classi di stile, mettendole nella sezione dell'HTML "Codice HTML che sarà mostrato in CIMA a tutte le pagine". Incolla quanto segue: (come sopra, ho fissato le dimensioni a 560/315).
CODICE
<style>.youtube {position: relative;
height: 0;
overflow: hidden;
max-width: 560px;
background: #000;
margin: 5px}
.youtube {top: 0;
left: 0;
width: 560px;
height: 315px;
z-index: 9;
background: transparent}
.youtube img {bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 560px;
width: 560px;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all}
.youtube img:hover {-webkit-filter: brightness(75%)}
.youtube .play {height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer}</style>
Il tutto è ovviamente modificabile secondo le nostre preferenze, specialmente le classi di stile, anche se poi penso che così possa pure andare bene
Una volta inserito il tutto, fate sapere come va
ed in caso imprecate pure contro di me
.gif)
