Removing black borders 4:3 on youtube thumbnails

YouTube offers images that don't have the 4:3 ratio black strips. To get a 16:9 video thumbnail with no black strips, try one of these:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

The first one mqdefault comes as a 320x180 pixel image.

The second one maxresdefault comes as a 1500x900 pixel image, so it would need resizing to use as a thumbnail. This is a nice image but it isn't always available. If the video is of a low quality (less than 720p I'd imagine, not exactly sure) then this 'maxresdefault' becomes unavailable. So never rely on it.

Use it as a background image, center it and change height.

http://dabblet.com/gist/4012604

.youtubePreview {
    background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
    height:204px;
    width:480px;
}

If you want it with a flexible width, use this:

HTML

<div class="thumb">
    <img src="...">
</div>

CSS

.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}

To remove the black borders from the Youtube thumbnail we need not have to write a seperate code or CSS. Simply use the ytimg.com site, that stands for YouTube image, which fetches the images from YouTube, like thumbnails and icons as required which come from that domain.

Example shown below -

Original Image [With borders]

http://img.youtube.com/vi/JQ7a_8psCn0/hqdefault.jpg

With No borders/Strips