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:

Answer 1

I'm not an expert, i was looking for a solution to remove the black bars of youtube video thumbnails, found a few solutions but didn't worked for me. Started experimenting with the solutions i found and came up with this.

https://jsfiddle.net/1fL2ubwy/

.row, .col, [class*="col-"] {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.yt-thumb {
    width: 100%;
    height: 74%;
    overflow: hidden;
}
.yt-thumb > img {
    margin: -10% 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-theme.min.css">


<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
      <a class="yt-thumb" href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
        <img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
      </a>
    </div>
    
    <div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
      <a href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
        <img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
       </a>
    </div>
  </div>  
</div>