/* The .video is the container class, so it needs to be positioned relative. */
.video {
  position: relative;
}
  /* For the overlay to respect the z-index it should position relative.
   * Also note it's an anchor tag, so the display is changed to block.
   */
  .video .overlay {
    position: relative;
    z-index: 30;
    display: block;
    opacity: 1;
  }

  .video .video-overlay {
    position: absolute;
    z-index: 40;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.4);

  }
    /* By setting the image to block it will automatically remove any unwanted
     * whitespace around (usually under) the image.
     */
    .video .overlay img {
      display: block;
      width: 100%;
      height: auto;
    }
  /* Prevent multiple actions being called by removing pointer events when the
   * video is loading.
   */
  .video.loading .overlay {
    pointer-events: none;
  }
  /* Set the z-index to place the overlay under the .full div when video is ready
   * We do this to make shure it's not possible to click the overlay
   */
  .video.ready .overlay {
    z-index: 1;
  }

  /* The .full element contains the video returned from ajax.
   * It uses the .video as a scaffold, and fills it out completely.
   */
  .video .full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    opacity: 0;
    transition: 200ms;
  }
  /* Show the .full div containing the video when
   * the video is ready.
   */
  .video.ready .full {
    opacity: 1;
  }
    /* Make sure the iframe respects the .full boundries. */
    .video .full iframe {
      width: 100%;
      height: 100%;
    }

  /* Place the default Drupal progress throbber in the middle.
   * One would usually remove the throbber completely, and use a custom element
   * inside the video, or no progress at all.
   */
  .video .ajax-progress-throbber {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }