CSS: styling a YouTube video gallery

In this post I'm going to show you how to style a YouTube video gallery with CSS. We'll use an unordered list to contain our videos, which have been embedded using the YouTube's default iframe elements. Since iframes are actually inline-block element, we have to turn them into block-level elements before applying styles to them. Here's the markup structure:

<ul id="youtube-gallery">
 <li><iframe/></li>
 <!--other three videos-->
</ul>

And here are our CSS styles, with some CSS3 enhancements:

#youtube-gallery {
 width: 60%;
 margin: 0 auto;
 padding: 1em;
 list-style: none;
 height: 100%;
 overflow: hidden;
 background: #2b2b36;
 border-radius: 8px;
 box-shadow: 7px 7px 7px rgba(204, 204, 204, 0.8);
}

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


#youtube-gallery iframe {
 display: block;
 width: 90%;
 margin: 0 auto;
 padding: 8px;
 background: #666;
 border-radius: 8px;
 height: 150px;
}

All the dimensions here are expressed in percentages so that our gallery will always fit the browser window. You can see a demo below.

Demo

Live demo