Come creare uno slider di video con bottoni e cursore di navigazione.

Come mostrare uno slider con 6 o più video di Youtube che il lettore può navigare e riprodurre senza lasciare la pagina web.

Siete degli youtuber già affermati o volete diventarlo e avete anche un sito di riferimento? Siete dei blogger che pubblicano anche dei video su Youtube o altri siti di video sharing? In entrambi i casi potrebbe essere utile riunire in una sola pagina alcuni dei video più rilevanti che avete pubblicato in modo che i lettori possano visualizzarne il player e eventualmente riprodurli senza cambiare pagina.

Il procedimento che vi propongo è quello di creare uno slider con pulsanti di navigazione nella parte alta e con cursore di navigazione in quella bassa. Uno slider non è altro che un insieme di schede che possano essere navigate da una sola pagina.

Abbiamo già visto come si possano mostrare in una pagina web dei contenuti suddivisi in schede.  Il concetto è più o meno lo stesso con la differenza che i contenuti sono rappresentati da dei video di Youtube. Lo slider verrà inserito in una pagina statica che potrà essere aggiunta nel menù con il titolo I miei migliori video o qualcosa di simile. Naturalmente al posto dei video di Youtube si possono anche incollare i codici di incorporamento di altri siti di video-sharing come Vimeo o alternare video da più domini.

Non si utilizza javascript ma solo HTML e CSS3 con una transizione che può essere personalizzata nella durata. Si possono personalizzare anche altri parametri come i codici dei colori dello sfondo. Il risultato sarà simile a questo

Con il cursore i video si sfoglieranno in modo continuo mentre con i bottoni di navigazione ci si sposterà direttamente da uno all'altro. I pulsanti di navigazione sono formati da numeri posti in alto.

Gli utenti di Blogger possono inserire questo slider in una pagina statica ma anche chi utilizza Wordpress può usare questo codice nello stesso modo. Si va su Bacheca -> Pagine -> Nuova pagina e si incolla questo codice

<style>
.slider {
   width: 600px;
   text-align: center;
   overflow: hidden;
}
.slides {
   display: flex;
   overflow-x: auto; 
   border-radius: 5px; 
   scroll-behavior: smooth; 
   -webkit-overflow-scrolling: touch;
   scroll-snap-points-x: repeat(600px);
   scroll-snap-type: mandatory;
}
.slides::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}
.slides::-webkit-scrollbar-thumb {
   background: black;
   border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
   background: transparent;
}
.slides > div {
   flex-shrink: 0;
   width: 600px;
   height: 350px;
   border-radius: 10px;
   background: #eed3a1; /*colore di sfondo del player video */
   transform-origin: center center;
   transform: scale(1);
   transition: transform 0.5s;
   position: relative; 
   display: flex;
   justify-content: center;
   align-items: center; 
}
.slides > div:target {
   transform: scale(0.9);
}
.slider > a { 
   display: inline-flex; 
   width: 1.5rem;
   height: 1.5rem;
   background: white;
   text-decoration: none;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   margin: 0 0 0.5rem 0;
   position: relative;
}
.slider > a:active {
   top: 1px;
}
.slider > a:focus {
   background: #000;
}
</style>
<div class="slider"> 
   <a href="#slide-1">1</a>
   <a href="#slide-2">2</a>
   <a href="#slide-3">3</a>
   <a href="#slide-4">4</a>
   <a href="#slide-5">5</a>
   <a href="#slide-6">6</a>
   <div class="slides">
     <div id="slide-1">
     Codice iframe video 1
     </div>
     <div id="slide-2">
      Codice iframe video 2
     </div>
     <div id="slide-3">    
    Codice iframe video 3
     </div>
     <div id="slide-4">    
   Codice iframe video 4
     </div>
     <div id="slide-5">     
    Codice iframe video 5
     </div>
<div id="slide-6">     
    Codice iframe video 6
     </div>
   </div>
</div>

quindi si pubblica la pagina. Al posto delle righe colorate di blu si incolla il codice dell'iframe copiato da Youtube. Visto che ho scelto una dimensione di 600x350 pixel sono da inserire i codici dei video con dimensioni da 560x315 pixel con formato 16:9.

Demo
Clicca qui

Se non vi piacciono i bottoni di navigazione incollate questa riga di codice

.slider > a {display: none;}

subito sopra a l tag </style>. Con questa scelta si potrà navigare tra i video solo con il cursore posto in basso.  Il colore black del background ovvero #000 si riferisce al cursore posto in basso. La transizione ha una durata di mezzo secondo ovvero transition: transform 0.5s; mentre quando si clicca su un pulsante il contenuto di una slide si riduce al 90% con la riga transform: scale(0.9);.

Si possono aggiungere anche più video mantenendo la stessa sintassi. Per esempio per aggiungere un settimo video si incolla la riga <a href="#slide-7">7</a> sotto alle altre sei  e si aggiunge un altro blocco

<div id="slide-7">     
    Codice iframe video 7
     </div>

prima dei due </div> finali del codice.