Create a responsive video play button overlay

A project I’m working on now involves redesigning an existing site, and converting it to a responsive design using the Bootstrap framework. One part of the home page has a list of video thumbnail images. We wanted to overlay a play button icon on the image to give an indication of what will happen when a user clicks on a thumbnail. This is pretty simple when you have a fixed size image, but it gets a little trickier with responsive images. The trick to making it work was adding a float to the containing element.

HTML5 and CSS starter templates

Back in 2008 while working on two large website redesign projects, I needed to create a set of common reusable styles and a series of basic HTML layout patterns. One of the projects needed a comprehensive style guide detailing the CSS usage. The project also required several layout variations in anticipation of different content configurations. Both projects shared some common layout features.