$video-player-z-index: 1;

.video {
  position: relative;
  padding-bottom: 35.5%; // Julia's Ratio :)
  height: 0;
  overflow: hidden;
}

.video--16-9 {
  padding-bottom: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: $video-player-z-index;
}

.video__preview {
  width: 100%;
  position: absolute;
  z-index: $video-player-z-index + 1;
  transition: opacity 0.3s linear;

  .is-playing & {
    opacity: 0;
    pointer-events: none;
  }
}

.video__heading {
  width: 100%;
  position: absolute;
  top: 50px;
  font-size: 2em;
}

.video__interface {
  //cover the player, removing any interactions directly with the 3rd party player
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $video-player-z-index + 2;
  display: none;

  .is-ready & {
    display: block;
  }

  .is-playing & {
    pointer-events: none;
  }
}

.video__play,
.video__close {
  cursor: pointer;
  z-index: $video-player-z-index + 3;
  position: absolute;
  transition: opacity 0.3s linear;

  &:hover {
    opacity: 0.6;
  }
}

.video__play {
  top: 50%;
  left: 50%;
  margin: (-$video-play-size / 2) 0 0 (-$video-play-size / 2);

  .is-playing & {
    display: none;
  }
}

.video__close {
  display: none;
}