Come pubblicare video Responsive su Blogger

Come pubblicare video Responsive di Youtube, Vimeo, ecc su Blogger che adattino automaticamente la larghezza alla risoluzione del dispositivo desktop o mobile con cui si aprono.

I codici per incorporare i filmati in una pagina web che vengono ricavati dai siti di video-sharing contengono il parametro width con l'indicazione della larghezza in pixel che può essere impostata direttamente dall'utente.

Nel momento in cui si incolla tale codice in Modalità HTML la larghezza del player del video rimane la stessa anche quando la pagina viene aperta da un dispositivo mobile. Se si sceglie una larghezza per esempio di 560 pixel questa va molto bene se il post viene aperto con un computer ma è eccessiva se invece si apre con uno smartphone.

Per chi utilizza un Tema Responsive di Blogger non è richiesta alcuna azione per rendere il video di Youtube Responsive cioè adattato automaticamente a tutte le risoluzioni. La larghezza del player verrà ridotta automaticamente in funzione della risoluzione del dispositivo con cui viene aperta la pagina.

Anche i video di Vimeo vengono resi Responsive dai nuovi Temi di Blogger così come tutti i video incorporati attraverso un codice di un iframe. Il discorso diventa più complicato se si sta utilizzando un Tema di Blogger classico cioè Non Responsive che ha una versione per il desktop e una per il mobile che si ottiene aggiungendo la stringa ?m=1 a tutti gli URL dei post e delle pagine.

Con tali modelli il player del video non si adatterà automaticamente alle diverse risoluzioni e quindi dovrà essere l'amministratore del sito a provvedere. In questo post vedremo due metodi per farlo in modo piuttosto semplice visto che si salva il codice nel modello in modo da pubblicare i video Responsive senza troppa difficoltà.

CREARE DUE VERSIONI PER IL VIDEO

Il primo metodo è quello di incollare in un file di testo due codici del video con due differenze larghezze. La prima potrebbe essere di 560-600 pixel e verrà mostrata nei dispositivi desktop mentre la seconda di 360-400 pixel che verrà mostrata solo nei dispositivi mobili.

Per passare da un player all'altro si utilizzano le regole Media Query o Media Screen che inseriscono una sorta di vincoli per la visualizzazione di un contenuto. Dopo aver salvato il Tema di Blogger per un eventuale ripristino si va su Bacheca -> Tema -> Modifica HTML e si cerca la sezione <b:skin> per poi cliccare sulla freccetta nera posta a sinistra in modo da visualizzarne tutto il codice. Si cerca l'ultima riga della sezione che è ]]></b:skin>  quindi subito sopra a questa si incolla questo codice

/* VIDEO RESPONSIVE */
@media screen and (min-width: 559px) {
.onlysmartphone {display:none;}
}
@media screen and (max-width: 560px) {
.desktoptablet{display:none;}
}

dove il breakpoint posizionato a 560 pixel può essere modificato a piacere. Si salva il Tema.

Quando si pubblica un video di Youtube o di Vimeo dovremo incollare un Modalità HTML questo codice

<div align='center'> <div class="desktoptablet">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ayo2N8QxDwE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="onlysmartphone">
<iframe width="320" height="180" src="https://www.youtube.com/embed/Ayo2N8QxDwE?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div>

In questo modo quando il post viene aperto con un computer desktop sarà visibile in video con larghezza 560 pixel mentre se viene aperto con uno smartphone si visualizzerà un player largo 320 pixel. Chiaramente il codice dell'iframe è puramente indicativo e dovrà essere sostituito da quello del video da incorporare.

Un tale codice incollato nell'Editor di Blogger mostrerà due player uno sopra all'altro ma dopo la pubblicazione se si apre un post verrà visualizzato solo un video  seconda della risoluzione del dispositivo.

COME USARE I CSS FLUIDI PER RENDERE RESPONSIVE I VIDEO

Questo secondo sistema è più pratico del primo ed è quello che utilizzo su questo sito. Si va sempre su Bacheca -> Tema -> Modifica HTML e si cerca la riga ]]></b:skin> con la modalità illustrata in precedenza quindi subito sopra a questa si incolla questo codice CSS

/* 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%;
}

Quando si vuole pubblicare un video responsive in un post se ne incolla il codice con questa sintassi

<div class="video-player">
<!-- Codice di un iframe di Youtube o di Vimeo -->
</div>

scegliendo una larghezza almeno pari alla larghezza del layout del post. Dopo la pubblicazione il video non sarà tagliato e prenderà tutta la larghezza della pagina

Si può utilizzare questa tecnica anche senza toccare il template inserendo il codice CSS tra i tag <style> e </style> per poi incollarlo subito sopra al codice HTML del video nella stessa pagina da pubblicare.

Leggi anche: Come pubblicare immagini responsive in Blogger