Introduction

On templates where the archives are used primarily to display videos, the black letterbox border will appear because the thumbnail is derived from top-left and does not fit video dimensions. To alleviate this, change the thumbnail size.

The Solution

Add this to the custom.css under Appearance > Editor:

.archive-post-image iframe {
height: 130px;
}
ul.archives_list li {height: 200px;}

.archives_list li .archive-post-image {
width: 190px;
overflow: visible;
}

[box -content=” Note: If you are using YouTube videos, you may need to experiment with making the thumbnails larger in order for the play button to center in the player. These styles do not influence the appearance of the video players, including the black border around vimeo videos. These are effects of the video embeds.” -type=”alert” -style=”rounded” -border=”full”] Note: If you are using YouTube videos, you may need to experiment with making the thumbnails larger in order for the play button to center in the player. These styles do not influence the appearance of the video players, including the black border around vimeo videos. These are effects of the video embeds.[/box]

Elementor