Come adattare automaticamente i video alle risoluzioni dei dispositivi desktop e mobile (Responsive).

Come rendere Responsive i video di Youtube, di Vimeo e di altri siti di video-sharing per adattare il loro player alla dimensione del dispositivo con cui vengono aperti.

Quando si vuole incorporare un video di Youtube si va sotto il Player e si clicca su Condividi -> Codice da incorporare per poi copiare il codice dell'iframe da incollare in Modalità HTML.

L'iframe ha per sua natura i parametri della larghezza e dell'altezza che poi ne fisserà le dimensioni del player da visualizzare nella pagina web. La larghezza, e di conseguenza l'altezza per mantenere inalterate le proporzioni, potrà essere personalizzata al pixel andando su Mostra Altro per poi scegliere le dimensioni personalizzate. Il codice da incollare muterà in tempo reale.

Una dimensione giusta del player video per un post su un blog può essere quella con larghezza che va da 560 a 640 pixel. Il problema si palesa quando questo stesso post si apre con uno smartphone visto che il player del video risulterà tagliato inesorabilmente.

Questa difficoltà non esiste nei nuovi Temi Responsive di Blogger che adattano automaticamente le dimensioni del video a quello del dispositivo. Ecco come si vede lo stesso video pubblicato con gli stessi parametri nella versione mobile di un blog di Blogger non Responsive e di uno Responsive.

COME RENDERE UN VIDEO RESPONSIVE CON I CSS

Usando il linguaggio CSS possiamo creare una regola per rendere Responsive i video e adattarli automaticamente alla risoluzione del dispositivo con cui vengono aperti.

1) METODO GENERALE PER RENDERE RESPONSIVE UN VIDEO IN UNA PAGINA WEB

Se vogliamo che il nostro video si adatti automaticamente alle dimensioni del dispositivo dobbiamo incollare in una pagina web un codice che abbia questa struttura

<style>
.video-player {
position: relative;
padding-bottom: 56.25%;
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%;
}
</style>
<div class="video-player">
<!-- Codice di Youtube --></div>

Con questo codice il player verrà mostrato in tutta la larghezza disponibile nel post sia nella versione desktop sia nella versione mobile.

2) COME RENDERE RESPONSIVE I VIDEO DI YOUTUBE SU BLOGGER

Gli utenti della piattaforma Blogger possono rendere responsive i video di Youtube in modo pressoché automatico inserendo nel codice del Tema la prima parte del codice precedente. Si va su Bacheca -> Tema -> Modifica HTML e si cerca la sezione <b:skin>.  Si clicca sulla freccetta nera posta alla sinistra per visualizzare tutto il codice della sezione. Con Ctrl+F si cerca la riga ]]></b:skin> quindi subito sopra si incolla

/* VIDEO PLAYER RESPONSIVE */
.video-player {
position: relative;
padding-bottom: 56.25%;
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 Tema. Quando si vuole pubblicare un video si usa un codice come questo

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

Ecco un esempio di un codice di un video responsive di Youtube

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

È interessante notare che se anche impostiamo una larghezza superiore all'area del post (700 nel codice di esempio) il video non sarà tagliato e prenderà tutto lo spazio disponibile.

3) VIDEO DEGLI ALTRI SITI DI VIDEO SHARING

Questo metodo può essere applicato anche ai video presi dagli altri siti come per esempio Vimeo. Si va sul bottone Share visibile sotto il player quindi si clicca su Embed e si copia il codice. Può essere tralasciata la parte di codice tra <p> e </p> compresi e considerare solo quella dell'iframe. Tale codice si incolla con questa struttura

<style>
.video-player {
position: relative;
padding-bottom: 56.25%;
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%;
}
</style>
<div class="video-player">
<iframe src="https://player.vimeo.com/video/214537001" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Questo codice funzionerà in tutte le pagine HTML. Gli utenti di Blogger possono incollare nel post solo la seconda parte del codice nel caso che abbiano nel codice Tema già incollato la prima parte.