Incorporare video YouTube in maniera “responsive”

Ogni tanto ci si rivede… scusa ma ultimamente sono un pò impegnato!
Ma comunque… stavo facendo un lavoretto e mi sono imbattuto nella necessità di dover incorporare un video da YouTube in un’interfaccia di tipo responsive… Conosci gli stili responsive giusto? Beh in caso puoi dare un’occhiata qui.
Tornando a noi, se vogliamo incorporare un video da YouTube il codice classico che ci viene fornito è del tipo:

<iframe src="//www.youtube.com/embed/29G4-YyxQMs" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Come puoi ben notare ci sono sia la larghezza che l’altezza ben definite in 560×315… bene ma se questo video deve essere contenuto in qualcosa di dinamico, che modifica la sua larghezza in base al dispositivo che lo sta visualizzando, come si fa? Possono venirci in aiuto due sistemi. Il primo utilizza del semplice codice CSS, il secondo un semplice plugin jQuery.
Vediamoli!

Primo metodo:

Racchiudiamo l’iframe contenente il video in un div avente classe nano-video (naturalmente il nome della classe è a piacere).

<div class="nano-video">
    <iframe src="//www.youtube.com/embed/29G4-YyxQMs" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen">
    </iframe>
</div>

A questo punto avvalendoci del seguente codice CSS possiamo fare in modo che il video si trovi incorporato con posizione assoluta all’interno del nostro div contenitore e sfruttando la proprietà di padding-bottom impostata a 56.25% possiamo garantire in ogni caso la visualizzazione in 16:9 del nostro player.

.nano-video {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
}
.nano-video iframe,
.nano-video object,
.nano-video embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

Secondo metodo:

Questo altro metodo si avvale di un piccolo plugin di jQuery: FitVid.js

$('.container').fitVids();

Richiamandolo in questo modo, il plugin ricercherà all’interno del tag su cui è invocato la presenza di embed di YouTube (o di Vimeo, o di un servizio a vostra scelta) ed effettuerà in automatico il wrapping e l’assegnazione delle proprietà CSS viste nel primo metodo calcolando però dinamicamente l’aspect ratio del video.
Buona Pasqua 🙂

Potrebbero interessarti anche...