/* Modified from https://codepen.io/maghrout/pen/KqmJbQ */

.feature-video {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  box-shadow: 0 10px 19px -8px #000;
}

.feature-video__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.feature-video__placeholder {
  width: 100%;
  position: absolute;
}

.feature-video__youtube {
  padding-bottom: 56.23%;
  width: 100%;
  height: 0;
  overflow: hidden;
  position: relative;
  object-fit: cover;
  background-color: black;
}

.feature-video__button {
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  left: 0;
  position: absolute;
  text-indent: -9999px;
  top: 0;
  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 100%;
}

.feature-video__button:before {
  width:100%;
  height:100%;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(yt_icon_light.png) no-repeat center center;
  background-size: 10%;
}

.feature-video__button:hover:before {
  background: url(yt_icon_rgb.png) no-repeat center center;
  background-size: 10%;
}