CSS: galleria di video di YouTube fluida

Realizzare una galleria di video di YouTube fluida con i CSS richiede semplicemente l'uso delle percentuali sulle dimensioni degli elementi. L'effetto finale che si ottiene è quello di una galleria che si adatta completamente alle dimensioni della finestra del browser. Vediamo i dettagli.

Partiamo dalla seguente struttura HTML:

<h1 id="channel"><a href="http://www.youtube.com/user/gabrieleromanato">Video di Gabriele Romanato</a></h1>

<ul id="youtube-gallery">

	<li><iframe /></li>
	<!-- altri video -->

</ul>

Gli elementi iframe usati sono quelli presi direttamente da YouTube. Cominciamo col definire le dimensioni della lista che contiene i video:

#youtube-gallery {
	width: 60%;
	margin: 0 auto;
	padding: 1em;
	list-style: none;
	height: 100%;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 7px 7px 7px rgba(204, 204, 204, 0.8);
	background: #000000;
	background: -moz-linear-gradient(top, #000000 0%, #45484d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#45484d));
	background: -webkit-linear-gradient(top, #000000 0%,#45484d 100%);
	background: -o-linear-gradient(top, #000000 0%,#45484d 100%);
	background: -ms-linear-gradient(top, #000000 0%,#45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=0 );
	background: linear-gradient(top, #000000 0%,#45484d 100%);
}

La lista è larga il 60% del totale dello spazio disponibile sulla pagina. Ora definiamo le voci di lista:

#youtube-gallery li {
	float: left;
	width: 25%;
}

Le voci sono larghe il 25% del totale della larghezza della lista. Quindi passiamo ai video:

#youtube-gallery iframe {
	display: block;
	width: 90%;
	margin: 0 auto;
	padding: 8px;
	background: #b5bdc8;
	background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b));
	background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
	background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
	background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 );
	background: linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
	border-radius: 8px;
	height: 150px;
}

I video sono larghi il 90% del totale della larghezza di una voce della lista. Il tocco finale è dato dal titolo della galleria:

#channel {
	margin: 0 auto;
	width: 150px;
	height: 150px;
	background: url(youtube.png) no-repeat;
	padding-bottom: 0.5em;
	-moz-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

#channel a {

	display: block;
	width: 100%;
	height: 100%;
	text-indent: -1000em;
	
}

Nell'immagine che segue vedrete come la galleria si adatti ad una risoluzione di 800 x 600 pixel:

Potete visionare l'esempio finale in questa pagina.