I have introduced an iframe containing a YouTube video to my page. The thumbnail for the video fits perfectly on the video player when on Mobile, however when on tablet or desktop the thumbnail is larger than the player.

Here is my code

.iframe-container {
  /* margin-top: 50px; */
  overflow: hidden;
  padding-top: 56.25%; /* 16:9*/
  position: relative;
  /*margin-bottom: 30px; */
  margin: 50px 60px 30px 60px;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

<div >
  <iframe src="https://www.youtube.com/embed/jKCj3XuPG8M" frameborder="0" allowfullscreen></iframe>
</div>

large thumbnail

Any help for getting the thumbnail to fit all size video player would be greatly appreciated.

CodePudding user response：

You can add aspect-ratio: 16 / 9; to your iframe:

.iframe-container {
  overflow: hidden;
  position: relative;
  margin: 50px 60px 30px 60px;
}

.iframe-container iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}

  <div >
    <iframe src="https://www.youtube.com/embed/jKCj3XuPG8M" frameborder="0" allowfullscreen></iframe>
  </div>