Black borders on youtube thumbnails

[synox]

Issue:

Possible solution:

• move border-radius to parent and hide overflow:

  .cards.video .cards-card-image {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow: hidden;
  }

  • zoom the thumbnail by 10% and remove the border radius:

    .cards > ul > li img {
    transform: scale(1.1);

  • maybe restrict this youtube videos, by only zooming youtube thumbnails:

    .cards > ul > li img[src*="img.youtube.com"] {
    transform: scale(1.1);
    }