Miniatura che carica un video quando viene cliccata

L'altro giorno abbiamo visto un uploader video in cui la parte complicata era il markup HTML e quella facile era il corrispondente codice JavaScript. Ora, per fare qualcosa di diverso, che consiste (come Cenerentola con la carrozza di zucca) nel visualizzare una miniatura o uno screenshot di un video e poi caricarlo quando si clicca , faremo l'opposto: complicheremo il codice JavaScript per rendere il più semplice possibile il compito più banale di inserire video nelle nostre pagine.
Il risultato è più semplice rispetto all'inserimento del codice fornito da YouTube, perché non carichiamo il video finché non è necessario, solo un'immagine. Inoltre, il tutto si adatterà a qualsiasi larghezza dello schermo, che è ciò che serve oggigiorno.
Come ulteriore vantaggio, avremo una miniatura per i nostri post, che il normale codice video non fornisce e che amiamo vedere quando condividiamo sui social media.
Per iniziare i test, puoi cliccare sull'immagine seguente e vedere come apparirà il risultato.

Per ottenere questo effetto basta includere il seguente codice:

CSS

Se utilizzi Blogger dovrai modificare il modello e inserire tutto questo prima della chiusura }]]></b:skin> oppure aggiungerlo dal designer del modello.

.videobox {larghezza: 800px;larghezza massima: 100%; margine: 0 auto;}
[id^=video] {posizione: relativa;padding-bottom: 56,25%;padding-top: 30px;altezza: 0;overflow: nascosto; sfondo: #000;}
[id^=video] iframe,[id^=video] oggetto,[id^=video] incorpora {posizione: assoluta;parte superiore: 0; sinistra: 0;larghezza: 100%;altezza: 100%;}
[id^=video] img {posizione: assoluta;alto: 0;basso: 0;margine: automatico;larghezza: 100%;altezza: automatico;cursore: puntatore;}
[id^=video]:dopo {contenuto: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Qta510o962a17Nplk7zezXOg_rxtgFQhT8oN9AbOA1fsN9uztP3-x1 r7eTVXMExV1gneqrF4N3mKkzahz42GBkyXFyW34sc4uBJGg87S9k5_yTfLXbEf7DzIQdhtmusJ8c3sckqm699h/s1600/play-overlay.png); absolute;top: 50%;margin-top: -38px;left: 50%;margin-left: -38px;z-index: 1;cursor: pointer;}
.empty:after {content:"" !important;}

JavaScript

Se non hai abbandonato l'editor dei template, puoi aggiungere la sezione JavaScript prima di </head> da lì . Se hai già jQuery, elimina la prima riga di tutte le righe (dopo il commento, ovviamente).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$("document").ready(function() {
$("div[id^=video]").click(function() {
var boxid = $(this).attr("id");
var idvideo = $("#"+boxid+" img").attr("src").split("/")[4];
var ytvideo = "<iframe src='https://www.youtube.com/embed/" + idvideo + "?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe>";
$("#"+boxid).addClass("empty");
document.getElementById($(this).attr("id")).innerHTML = ytvideo;
});
});
//]]></script>

HTML

Ora siamo pronti, quindi da ora in poi, ogni volta che vorrai includere un video in un post o in una pagina, ti basterà includere il seguente codice, modificando solo l'ID del video.

Questo identificatore è il set di 11 caratteri alfanumerici che ho evidenziato con un colore diverso. Questa è l'unica cosa, come ho detto prima, che devi cambiare continuamente.
Per ottenere l'identificatore di qualsiasi video, basta guardare l'URL che verrà visualizzato nel browser quando ne visiti uno:

Oppure estrailo dal link che appare quando clicchi su di esso.Condividere:

Per includere un secondo video nella stessa pagina, e poiché gli ID devono essere univoci, dovresti usare video2 anziché video1 nel markup HTML . Per più video per pagina, continua la sequenza senza problemi. Esempio funzionante.

Spiegazione JavaScript

Dato che ci stiamo già conoscendo e questo interessa solo a una minoranza, ho lasciato le spiegazioni su come funziona per la fine :)
Dopo la riga che carica jQuery, viene indicato che il plugin non verrà eseguito finché non verrà caricata l'intera pagina, in modo che tutti gli elementi che devono essere "disegnati" su di essa possano essere manipolati correttamente:
$("document").ready(function() {
Aspettiamo che venga cliccato un box con un id che inizia con video . Nell'esempio di questo post sarebbe video1 , ma con il selettore di attributi utilizzato, tutti quelli che iniziano con quei caratteri saranno suscettibili di essere elaborati ed è per questo che funzionerà con video2 , video3 , ecc.
$("div[id^=video]").click(function() {
Una volta inserito, la prima cosa da fare è scoprire l' id del box contenitore su cui abbiamo cliccato ( video1 nell'esempio) per averlo come riferimento per estrarre più dati da esso e infine inserire il codice che creerà/caricherà il video:
var idcaja = $(this).attr("id");
Ora ci serve l' id del video. Lo ricaviamo dalla miniatura che abbiamo incluso nella parte HTML ( http://img.youtube.com/vi/zWCINQn6k0s/hqdefault.jpg ) tagliando l'URL incluso nel suo src con le barre (/) e registrando il quarto segmento, che è quello che ci interessa, in una variabile chiamata idvideo e nella classe .vacio ):
var idvideo = $("#"+idcaja+" img").attr("src").split("/")[4];
Ora ricostruiremo il codice di inserimento che YouTube ci fornisce, che è lo stesso in tutti i casi e si distingue precisamente solo dall'id di ogni video. Aggiungo un autoplay perché altrimenti dovresti cliccare una seconda volta dopo averlo caricato:
var ytvideo = "<iframe src='https://www.youtube.com/embed/" + idvideo + "?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe>";
Quanto segue aggiunge una nuova classe alla casella contenitore premuta, per eliminare il "pulsante" a forma di triangolo all'interno di un cerchio che abbiamo aggiunto all'immagine utilizzando CSS (vedere il selettore [id^=video]:after nella sezione CSS ):
$("#"+idcaja).
addClass("vacio"); E cosa resta? Beh, non ci resta che sostituire il contenuto originale del contenitore, usando il suo id , con questo codice precedente che forma il video stesso (ytvideo ). Quindi chiudi e chiudi:
document.getElementById($(this).attr("id")).innerHTML = ytvideo;
});
});

fonte

Archivio Blogger

Cerca nel blog