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">
 <!--other three videos-->

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.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

2 thoughts on “CSS: styling a YouTube video gallery”

Leave a Reply

Note: Only a member of this blog may post a comment.