@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;
  transition-duration: $transition-duration;
  transition-timing-function: $transition-timing;
}
.audioplayer[data-type="youtube"] {
  .the-media {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;

    width: 200px;
    height: 120px;

    pointer-events: auto;

    > iframe {

      width: 200px;
      height: 120px;
    }

    $transition-property: opacity, visibility;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  &.is-playing {
    .the-media {
      opacity: 1;
    }
  }
}

.dzsap-sticktobottom {

  .audioplayer[data-type="youtube"] {
    .the-media {

      top: auto;
      bottom: 100%;
      left: auto;
      right: 30px;
    }
  }
}