In this post I will show you how to style a video gallery with CSS. We're going to apply the same principle used for fluid image galleries, that is, element dimensions expressed in percentages, including the object element. As you will see, since this kind of element is just a replaced element as images, everything will work as expected. Now let's start with a basic HTML structure that makes use of an unordered list to contain our gallery:
<ul id="video-gallery">
<li>
<object data="path/video-test.mp4" type="video/mp4" width="400" height="300">
<param name="autoplay" value="false" />
</object>
</li>
<!-- other three videos -->
</ul>
To be displayed by a browser, an object element requires that we use its attributes to specify its width and height. These attributes will be later overridden by our CSS styles:
#video-gallery {
width: 60%;
margin: 0 auto;
padding: 2em 0;
list-style: none;
height: 100%;
overflow: hidden;
}
#video-gallery li {
width: 42%;
padding: 10px;
float: left;
margin: 0 5px 5px 0;
background: silver;
border: 1px solid gray;
border-radius: 8px;
}
#video-gallery li object {
width: 90%;
margin: 10px auto;
display: block;
}
All element dimensions are expressed in percentages, so we got a fluid video gallery that will always fit the browser's viewport. Since there are four videos on the demo page, it may take a while to display them all. However, if your bandwidth is not so large, just see the positions and dimensions of the placeholders used by your browser.