Ormai è chiaro: se il tuo sito non viene mostrato correttamente anche in versione mobile, sugli smartphone o tablet, tagli fuori una buona fetta di visitatori, dato che gli accessi con questi device rappresentano statisticamente la metà delle visite totali.


Recentemente, ho dato una bella sistemata al sito, rendendolo compatibile con qualsiasi dispositivo mobile. Ma c'era un problema che non riuscivo a risolvere in maniera pulita ed efficace: utilizzare il player per far visualizzare i video di Youtube in maniera responsive, cioè adattabile a qualsiasi risoluzione del monitor, quindi anche con un telefonino.

Dopo diversi tentativi, sono arrivato ad una soluzione realizzata in puro codice CSS, facilmente implementabile da tutti i siti con i fogli di stile.


Ecco qui il codice CSS:
.SfondoVideo {
position:relative;
padding-bottom:56.25%; /* per mantenere il rapporto 16:9 */
padding-top:0;
height:0;
border:4px solid red;
border-radius: 12px; /* da qui per arrotondare gli angoli */
-moz-border-radius: 12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px; /* fine per arrotondare gli angoli */
overflow:hidden; /* nascondo eccesso degli angoli */
}
/* qui gestisco il frame di Youtube */
.SfondoVideo iframe, .SfondoVideo object, .SfondoVideo embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

Poi nella pagina basterà inserire quest'altro codice HTML:
<div class="SfondoVideo">
<iframe src="http://www.youtube.com/embed/_ID_VIDEO_?rel=0&autohide=1&controls=1&showinfo=0&autoplay=0&version=3&modestbranding=1&fs=1" frameborder="0" allowfullscreen ></iframe>
</div>

Pratico ed efficace, non trovi? Il fatto di dargli un bordo colorato ed arrotondare gli angoli è una cosuccia che mi piaceva, giusto per non lasciare un rettangolone buttato li. Se poi vuoi aggiungere un po' di margine al player (qui negli articoli c'è 1%), riduci leggermente il padding-bottom (io l'ho messo al 54.75%)

Ed ecco il risultato: cambia dimensione alla finestra del browser e vedrai che il player si ridimensionerà di conseguenza, adattandosi perfettamente ad ogni schermo dei PC come con gli smartphone!