Esiste un'API per gestire i video di YouTube a tuo piacimento. Puoi usarla per caricare qualsiasi video o playlist semplicemente usando il suo identificatore, modificare le dimensioni del widget, impostare il punto di inizio della riproduzione, gestire il volume, creare controlli di riproduzione esterni, ecc.
Ma oltre a dover caricare una libreria speciale per fare tutto questo, non è un compito facile gestire tutto ( demo ), quindi per riuscire a fare qualcosa di macchinoso , ho ideato un sistema molto semplice per generare almeno qualcosa di basilare ma spesso utile: un pulsante esterno che avvia o interrompe il video ... o più pulsanti se ci sono più video.
Come ormai è comune avere jQueryIl codice è stato creato con un piccolo JavaScript utilizzando questa libreria. Il resto è fatto da CSS, e con questo, il pulsante apparirà come quello che vedete a destra. Potete cliccarci sopra per vedere come avvia o riavvia il video qui sotto.
Il trucco che userò è molto semplice. Consiste nel creare automaticamente un pulsante che attiva una funzione per leggere l'indirizzo del video, aggiungere un'opzione di riproduzione automatica e sostituirla con l'indirizzo originale nell'iframe . In questo modo, la riproduzione del video inizia quando si preme il pulsante. Se viene premuto una seconda volta, viene eseguita la stessa operazione, ma la riproduzione automatica viene rimossa , in modo che il video torni al suo stato originale, ovvero fermo e in attesa di istruzioni per l'avvio.
La pausa funziona? No. Funzionano altre cose oltre a riprodurre/interrompere? No. È un codice semplice che fa solo quest'ultima cosa.
Il codice in questione è il seguente e, in Blogger, può essere inserito tutto in una volta nel template, subito prima di </head> .
<style>
.yt-play{posizione:fissa;alto:50%;destra:25%;indice z:99;famiglia caratteri:arial;larghezza:40px;altezza:30px;sfondo:#cd201f;display:blocco;margine:5px;dimensione box:bordo-box;cursore:puntatore;raggio bordo:50% / 10%;colore:#fff;allineamento testo:centro;ombra box:0 0 8px #fff}
.yt-play:passaggio,.yt-play.yt-off:passaggio .yt-playpausa:dopo{sfondo:#333;colore bordo:#333;colore bordo sinistro:#fff}
.yt-play:after{content:'';position:absolute;top:10%;bottom:10%;right:-5%;left:-5%;background:inherit;border-radius:5% / 50%}
.yt-play .yt-playpause{position:absolute;top:6px;left:14px;width:16px;overflow:hidden;z-index:2}
.yt-play.yt-off .yt-playpause:after{content:"";display:block;border:8px solid #cd201f;border-left:16px solid #fff}
.yt-play.yt-on .yt-playpause:after{content:"II";position:relative;left:-2px;top:-1px;font-size:20px;line-height:20px;color:#fff;font-weight:700}
iframe[src*="www.youtube.com/embed"]{background:#000}
</style>
<script>
$(document).ready(function() {
$(".post-body").append("<div class='yt-play yt-off'><div class='yt-playpause'></div></div>");
var videodata = $(".pos-body iframe[src*='www.youtube.com/embed']")[0].src;
$(".yt-play").on("click", function(ev) {
ev.preventDefault();
if ($(this).hasClass("yt-off")) {
$("iframe")[0].src += "&autoplay=1"; $ (
this).addClass("yt-on" ).removeClass("yt-off"); } }) ; </script>
Non devi fare altro (tranne assicurarti che jQuery sia presente nel template). Con quanto sopra, ogni volta che aggiungi un video a un post, il pulsante esterno verrà generato automaticamente.
Puoi configurare il CSS a tuo piacimento. Per esercitarti, apportare modifiche e qualsiasi altra cosa ti serva, puoi trovare tutto quanto sopra in questo Codepen: http://codepen.io/oloman/pen/MyGMXE .
Se di solito usi più di un video per post, puoi usare un altro codice leggermente più lungo, basato esattamente sullo stesso trucco.
Include anche più CSS del precedente, tra le altre cose, per aggiungere un messaggio popup quando il mouse passa sopra la barra dei pulsanti. "Esegui Penna" per visualizzarlo.
Commenti
Posta un commento