Come pubblicare un video Responsive con i CSS elastici.

Come rendere responsive un video applicando un CSS in modo da regolare automaticamente la larghezza del player in funzione del dispositivo con cui viene aperto: desktop, tablet o smartphone.

Nel post precedente abbiamo visto un escamotage per pubblicare un video che prenda dimensioni diverse quando viene aperto da desktop o tablet rispetto a quelle che prende se la pagina è aperta da cellulare.

In questo post vedremo invece un secondo metodo anche migliore di quello precedente che permette la stessa personalizzazione ma lo fa con continuità. Con il sistema già presentato il video rimane della stessa larghezza fino a un breakpoint per poi diventare di un'altra larghezza. Ho proposto per il player del video una larghezza di 560 pixel da essere mostrata nei dispositivi desktop e tablet e una larghezza di 320 pixel per i cellulari. 

Con il sistema che mi accingo a illustrare invece il video prenderà tutta la larghezza del layout dell'area del blog e si ridimensionerà con il ridimensionarsi della risoluzione del dispositivo. Inoltre questa procedura funziona con tutti i tipi di codici con cui vengono pubblicati i video. Su Youtube andando su Condividi -> Codice da incorporare viene mostrato il codice di un iframe ma negli anni passati quando era ancora attivo il Flash potevamo scegliere il codice con embed o con object.

COME PUBBLICARE UN VIDEO RESPONSIVE

Illustrerò la procedura per Blogger ma questa sarà applicabile anche a qualsiasi altra piattaforma in cui sia possibile aggiungere dei CSS. Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera posta alla sinistra per visualizzare tutto il codice che contiene. Quindi si cerca l'ultima riga ]]></b:skin> e, subito sopra, si incolla questo codice

/* Video Responsive */
.video-player {
position: relative;
padding-bottom: 55%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-player iframe, 
.video-player object, 
.video-player embed {
position: absolute;
top: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}

Si salva il modello. L'unico parametro da modificare è la percentuale 55% che si può scegliere tra 50% e 60% facendo dei test sul nostro modello. Quando si pubblica un video dobbiamo copiare il codice da Youtube e incollarlo in modalità HTML con questa sintassi

<div class="video-player">
<!-- Codice di Youtube -->
</div>

Possiamo scegliere anche una larghezza molto grande del player come per esempio 800 pixel tanto questa verrà automaticamente ridimensionata. Ecco un esempio di codice

<div class="video-player">
<iframe width="800" height="450" src="https://www.youtube.com/embed/g37NPAdzMno?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>

che se incollato nell'Editor del post e poi pubblicato produce questo risultato



Per testare ho utilizzato il tool Screenfly. Vi potete rendere conto di come la larghezza del player del video sia sempre perfettamente adattata a quella della pagina aprendo queste Demo:

Demo Clicca qui

Demo Clicca qui

Demo Clicca qui

L'unica controindicazione di questo sistema è che comunque il video prenderà sempre tutta la larghezza del blog. Si tratta però di un problema di poco conto.