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.jpghttp://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpgThe 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%;}