Introduction

Youtube creates auto-thumbnails that include the black letterbox and are 4:3 ratio. This is often in conflict with your theme’s video-aspect sized thumbnail layouts or just doesn’t look great. The following solution provides some custom css to effectively hide the black bars, however please note that this is only effective if the majority or all of your oEmbed content is YouTube, as it cannot differentiate youtube thumbs from vimeo thumbs.

The Solution

The following fix is specific to MagPress. For other themes, the same rules work in theory, but you will need to determine the correct class names for the image containers with Inspect Element.

Add the following to the Custom CSS:

/*Fixes YouTube oembed letterbox on blog list*/

.archive .blog-main-post-container .post-image{max-height: 160px; overflow: hidden;}

.archive .blog-main-post-container .post-image img{margin-top: -30px;}

/* Fixes YouTube oembed thumb letterbox on 3 column  and 2 column widget */

.three-column .post-image img{margin-top: -20px;}

.three-column .post-image{max-height: 105px;}

.two-column .post-image img{margin-top: 10px;}

.two-column .post-image{max-height: 60px;}