.embed-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-video-container iframe,
.embed-video-container object,
.embed-video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
  The wrapper for the thumbnail should be in
  16:9 format. We want to use the original
  width of 480 pixels, so a little math tells
  us that the height should be 270px.

  overflow: hidden specifies just that - any
  overflow outside of the box shouldn't show.
*/
.embed-youtube-thumb {
    position: relative;
    overflow: hidden;
    padding-bottom: 55%;
    display: block;
}

.embed-youtube-thumb::after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 60px solid white;
    border-bottom: 40px solid transparent;
    left: calc(50% - 20px);
    top: calc(50% - 40px);
    opacity: 0.75;
}

.embed-youtube-thumb:hover::after {
    opacity: 1;
}



/*
  The image inside the wrapper is now positioned
  absolutely. The left side is set to 0, so it
  is left-aligned with the wrapper box. The top
  is then figured out using:

  (img height - wrapper height) / 2
  or
  (360 - 270) / 2 = 45

  So the top of our image should be 45px above
  the box, to directly center it vertically.
*/
.embed-youtube-thumb img {
    position: absolute;
    top: -17.5%;
    left: 0;
    right: 0;
    width: 100%;
}