README.md

Responsive Video Gallery

I recently worked on a website redesign that needed a video gallery. It was a WordPress project and would contain videos from YouTube and Vimeo. I decided a custom post type and custom fields was the best approach, and what follows is the HTML5/CSS and jQuery app, Fancybox.

The code I wrote is open source and free to be copied, used, and changed.

The media query breakpoints are videos 4 across for sizes greater than 1024px, 3 across for sizes greater than 600px, and 2 across for sizes greater than 360px. At 360px the videos are no longer floated, but rather display:block in a single column.

I like the widths and margins to be fluid with percentages for the responsive layout.

It’s important to stretch the thumbnail image with width:100% on screen sizes that exceed the natural size of the image. When the screen size is smaller, the width of the article is smaller than the images's natural size, and max-width:100% takes over so the images are responsive.

Styling the video titles are also important – if the titles are on top of, or below, the video, and are not consistent across each video, each article height will be different and break the layout.