$ratio-16-9: 56.25%;

.paragraph--copy-video {
  display: flex;
  flex-flow: column;
  width: 100%;

  img {
    width: 100%;
    display: block;
  }
  
  .copy-video {
    &__video-wrapper,
    &__text-wrapper {
      width: 100%;
    }

    &__text-wrapper {
      padding: 15vw 5vw;
    }

    &__video-wrapper {
      position: relative;
      height: 0;
      padding-bottom: $ratio-16-9;
      padding-top: 0;

      iframe,
      img,
      .copy-video__button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        border: 0;
      }

      img {
        z-index: 2;
      }

      .copy-video__button {
        z-index: 3;
        border-radius: 0;
        background-position: center center;
        transition: 0;

        // Preload bg images
        background: url($image-path + "loader.gif") no-repeat -9999px -9999px;
        background: url($image-path + "loader.gif") no-repeat -9999px -9999px,
                url($image-path + "copyvideo--play-icon.svg") no-repeat -9999px -9999px,
                url($image-path + "copyvideo--play-icon__hover.svg") no-repeat -9999px -9999px;

        &.js-loading {
          background: rgba(0, 0, 0, 0.5) url($image-path + "loader.gif") center no-repeat;
          background-position: center center;
          background-size: 70px;
          @include breakpoint($screen-lg) {
            background-size: 100px;
          }
        }
        
        &.js-ready {
          background: rgba(0, 0, 0, 0) url($image-path + "copyvideo--play-icon.svg") center no-repeat;
          background-position: center center;
          background-size: 70px;
          @include breakpoint($screen-lg) {
            background-size: 100px;
          }

          &:hover {
            background: rgba(0, 0, 0, 0) url($image-path + "copyvideo--play-icon__hover.svg") center no-repeat;
            background-position: center center;
            background-size: 70px;
            @include breakpoint($screen-lg) {
              background-size: 100px;
            }
          }
        }
      }
    }
  }
  
  @include breakpoint($screen-md) {
    flex-flow: row;

    img {
      object-fit: cover;
      height: 100%;
    }

    .copy-video {
      &__video-wrapper,
      &__text-wrapper {
        width: 50%;
      }

      &__text-wrapper {
        padding: 5vw;
        display: flex;
        flex-flow: column;
        justify-content: center;
      }

      &__video-wrapper {
        height: auto;
        overflow: hidden;
        // Divided by 2, as we're now at a width of 50%, not 100%;
        padding-bottom: calc( #{$ratio-16-9} / 2);

        iframe {
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }

  &--portrait-50,
  &--portrait-100 {
    @include breakpoint($screen-md) {
      height: 50vh;
      
      .copy-video__video-wrapper {
        padding-bottom: 0;
        
        iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  &--portrait-100 { 
    @include breakpoint($screen-md) {
      height: 100vh;
    }
  }

  &--video-right {
    @include breakpoint($screen-md) {
      flex-flow: row-reverse;
    }
  }
}