Come rendere responsive i video di Youtube su Blogger.

Come rendere responsive i video di Youtube pubblicati su Blogger mostrando diverse larghezze su tablet, desktop e smartphone.

Il Responsive Design o Disegno Responsivo è quella tecnica applicata al linguaggio di programmazione che modifica in modo automatico il layout di una pagina web per poterla visualizzare correttamente quando aperta da dispositivi desktop o dispositivi mobili.

Esistono dei Modelli per Blogger e dei Temi per Wordpress che sono già stati creati con questa funzionalità.  Si può creare un modello responsive di Blogger anche da soli con un po' di pazienza. L'utilizzo del modelli di questo genere oppure utilizzando la versione mobile di un sito come nel caso di Blogger, non mette al riparo da problemi di visualizzazione da mobile. Ci sono infatti degli elementi che avendo una larghezza intrinseca non si adattano facilmente a tutti i dispositivi.

In post precedenti ho mostrato come risolvere questo problema per una tabella e in questo articolo vedremo come procedere con un escamotage per postare dei video di Youtube che possano essere visti correttamente con tutti i dispositivi.  Gli utenti di Wordpress hanno a disposizione dei plugin atti allo scopo che non sono disponibili per Blogger. Illustrerò una procedura che non è l'unica praticabile ma che non usando javascript è particolarmente leggera e non incide sulla velocità di caricamento del sito. Non escludo in futuro di presentare altri procedimenti da usare per questo tema.

Abbiamo già visto che con l'utilizzo delle regole Media Query si possa rendere Responsive un elemento del layout. Vedremo quindi come applicare questa procedura ai video di Youtube o di altro sito di video-sharing. Quando si apre un video di Youtube e si clicca su Condividi -> Codice da incorporare

Si possono scegliere le dimensioni personalizzate andando su Mostra altro per poi digitarle nell'apposito campo. Si potrà digitare solo la larghezza perché l'altezza sarà calcolata automaticamente. Una larghezza adatta a tutti i layout di un blog potrebbe essere quella di 560 pixel che comporta una altezza di 365 pixel per video che hanno un rapporto 16:9. Tale larghezza va benissimo per la versione desktop ed è supportata anche da praticamente tutti i tablet visto che hanno una risoluzione ben maggiore. I pixel però sono troppi per l'apertura con uno smartphone che nel migliore dei casi ha risoluzione di poco superiore ai 400 pixel. Il nostro obbiettivo sarà quindi di inserire un video da 560 pixel visibile da desktop e tablet e lo stesso video da 320 pixel visibile da smartphone. Ovviamente queste larghezze sono indicative e potranno essere modificate a discrezione dell'utente di Blogger. La procedura che vado a illustrare può essere usata anche su altre piattaforme visto che non sono presenti tag specifici di Blogger.

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin> per poi cliccare sulla freccetta nera posta a sinistra in modo da visualizzare tutto il codice. Si cerca l'ultima riga della sezione che è ]]></b:skin>  quindi subito sopra a questa si incolla questo codice

/* MEDIA QUERY VIDEO */
@media screen and (min-width: 529px) {
.onlysmartphone {display:none;}
}
@media screen and (max-width: 530px) {
.desktoptablet{display:none;}
}

Si salva il modello. Si pubblica un video di Youtube con un codice come questo

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

dove i codici evidenziati di giallo e di verde sono stati copiati da Condividi -> Codici da incorporare di Youtube. Se tale codice lo incolliamo nell'Editor di Blogger o su Open Live Writer si visualizzeranno due player video in questo modo

Dopo la pubblicazione però se ne vedrà solo uno in funzione della risoluzione con cui viene aperto



La visione da desktop e da tablet presenterà un player largo 560 pixel



Mentre da smartphone il player sarà largo 320pixel

La visualizzazione da tablet e da smartphone è stata ottenuta con il tool Screenfly. Concludo ricordando che le dimensioni proposte sono assolutamente arbitrarie e possono essere cambiate.

Altro Post sullo stesso tema: Video Responsive con CSS