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.

Responsive HTML and CSS starter templates

I’ve updated my internal HTML and CSS templates to include a responsive grid and other enhancements.

What is this?
For many projects, I’ve used my own collection of HTML and CSS to give me a starting point and speed up project development. I’m more likely to use Bootstrap or Foundation now, but my own internal templates are still useful on occasion and give me a chance to experiment and refine my process. My earlier set of HTML did not use a responsive design, and was getting outdated. This provided an opportunity to experiment with responsive design techniques, and also examine other frameworks in depth.

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.

View MAMP sites via Parallels

This post describes how to view local sites using MAMP and Parallels with minimal configuration. I am using MAMP 1.7, Parallels 4.0 and Windows XP, and OS X 10.5.6. This is definitely not the only method, but it works for me, and it’s easy to set up. I realize MAMP is not completely necessary on OS X, but the one-click installation is nice and suits my purposes for now.