HTML/CSS image overlay

Question

Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).

The plan was to display another transparent "play button" image over top of the content image using markup like this:

            <div class="media">
                <a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
                    <img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
                </a>
            </div>

This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?

Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:

W x H 400 x 200 400 X 300 400 X 400

The Play button needs to be centered in each image.

Answer 1

You could place your play button below the starting video image (but within a surrounding div) and then style it with a negative top margin (and possibly a higher z-index) which will pull the button back up. Can't comment on how this will play with embedded video/flash players across all the browsers though.

Answer 2

Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.

<div class="media">
  <a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
    <div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
  </a>
</div>

You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.

(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)