Removing black borders 4:3 on youtube thumbnails

Question

E.g. I have a link

http://img.youtube.com/vi/aOPGepdbfpo/0.jpg

for a youtube video thumbnail:

And I would like to remove the black top and bottom border so I get a picture like this:

Could it be done using PHP function javascript/jQuery or maybe youtube api itself?

Answer 1

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.

Answer 2

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;
}

Answer 3

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%;
}