Cropping YouTube Thumbnails using CSS

Tired of low quality YouTube thumbnails? Is your developer using the YouTube API to pull in distorted video thumbnails with black bars showing? I’ve discovered that there are four versions of thumbnails available, in different sizes and image quality, with and without black bars.

Four YouTube Thumbnail Resolutions
Low Quality Default, 120×90, approx 4k
Medium Quality Default, 320×180, approx 16k
High Quality Default, 480×360, approx 32k
Max Res Default – Size of largest movie resolution, approx 380k

Below are three representations using the same YouTube High Quality Default thumbnail which has black bars. I’ve used CSS to crop the black bars off the image so that it looks 16:9 like the original video. Keep in mind that there are many other ways to do this.

If you right-click on any image, and open it in another window or tab, you will see that it is the same large image.

1. Original YouTube High Quality Default Thumbnail – 480×360

Thumbnail Cropping

2. Scaled YouTube High Quality Default Thumbnail – 200 px Height

Thumbnail Cropping

3. Scaled and Faux Image Cropping applied – 150 px Height

Thumbnail Cropping

Here is the CSS:

img{border:none;
    }
img.hqdefault{
    height:200px;
 }
.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	border:0px solid #ccc;
	}
/* input values to crop the image */
.crop img{
	margin:-25px -0px -25px 0px;
	}

And here is the HTML:

<p class><a href="http://img.youtube.com/vi/WfA6Jb90LwY/hqdefault.jpg" title="Thumbnail Cropping"><img src="http://img.youtube.com/vi/WfA6Jb90LwY/hqdefault.jpg" alt="Thumbnail Cropping" /></a></p>
UA-616284-1