Con la crescita esponenziale dei dispositivi mobile, oggi sappiamo tutti che una regola fondamentale per garantire la massima esperienza all’utente che visita il nostro sito è quella di fornire una versione adattabile dei contenuti che vogliamo erogare.

Google stesso, nell’ottica di fornire i risultati migliori ai propri clienti, cioè a noi tutti che quotidianamente accediamo al motore di ricerca numero uno al mondo per effettuare ricerche od usufruire dei tanti servizi messi a disposizione, ha introdotto il “mobile-friendly” come un fattore di ranking da non sottovalutare.

In parole povere, Google premia nel posizionamento i siti “Responsive“.

Che cosa significa la parola Responsive?

Il web design Responsive è una tecnica per realizzare pagine web dalla struttura fluida, basata su griglie proporzionate, immagini flessibili e regole CSS diversificate con lo scopo di fornire differenti esperienze agli utenti che stanno visitando il nostro sito da PC desktop, tablet o smartphone. Pur mantenendo in linea di massima la stessa struttura HTML e lo stesso indirizzo web (URL), forniremo ai nostri visitatori un sito che si “restringe” o si “allarga” a seconda del tipo di strumento utilizzato per la navigazione.

Oggi molti temi per WordPress sono temi responsive, e questa è sicuramente un’ottima cosa, ma dal punto di vista della redazione dei contenuti, non è così scontato che si riescano ad adattare automaticamente contenuti a dimensioni fisse come per esempio gli IFRAME utilizzati per incorporare nei nostri testi i video dal canale YouTube.

Nel caso che il tema che state utilizzando non gestisca automaticamente i video responsive, o in caso serva inserire un video in una normale pagina HTML 5, in questo articolo vediamo come rendere adattabile il codice fornito da YouTube, ma non solo, la soluzione è valida anche per altre piattaforme come Vimeo o Slideshare.

Procedura per adattare i video ad un Design Responsivo:

Copiate ed incollate il seguente codice nel file style.css del tema che state utilizzando

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.video-container iframe, 
.video-container object, 
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
 max-width: 100%;
}

Una volta salvate le modifiche sul file css, è tutto molto semplice, non vi resta che inserire il codice da incorporare all’interno di un div con classe video-container

<div class="video-container"> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/_uxxrYtvkgI" frameborder="0" allowfullscreen></iframe>
</div>

Per info: Advanced Responsive Video Embedder