Home
menù...

Player video Youtube responsive sia desktop che mobile con CSS

mercoledì 29 luglio 2015
Player_responsive

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!



# 1 del 31/07/2015 18.20.44 di Daniel
Ciao belli!

Vedi le ultime trasmissioni in live streaming e produzioni video di DM8

Vedi tutte le foto del Torviscosathlon 2016

NEW! Le fotografie del Meeting di nuoto città di Lignano, del 23-24-25 aprile 2017

VEDI FOTO
gare ed eventi
See the photos
competitions and events

DM8 regia video Atem e streaming

Service video con regia mobile, multi camera e streaming

Vuoi registrare e/o trasmettere il tuo evento in maniera professionale? Leggi tutte le informazioni sul service che ti propongo e scoprirari che è anche conveniente!

Servizi fotografici tour virtuali 360° Google Business Street View