JSFiddle - React, Tailwind, and code Playground

HTML

<div id="youtubeWrap">
  <div class="inner">


    <iframe id="arrowLink" class="anIframe" src="https://www.youtube.com/embed/-xyz?wmode=opaque;rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" scrolling="no" allowfullscreen></iframe>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

#youtubeWrap {
  position: relative;
  overflow: hidden;
  border: red 1px solid;
}

.inner {
  position: relative;
  overflow: hidden;
}

#youtubeWrap .inner iframe {
  position: relative;
  display: block;
  transform: scale(1.0);
  animation-name: transform-out;
  animation-delay: 0s;
  animation-duration: .5s;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

#youtubeWrap .inner:hover iframe {
  border: green 1px solid;
  animation-name: transform, longtransform;
  animation-delay: 0s, .5s;
  animation-duration: .5s, 10000s;
  animation-direction: normal, normal;
  animation-fill-mode: forwards, forwards;
}

@keyframes transform {
    from {transform: scale(1.0);}
    to {transform: scale(1.2);}
}

@keyframes longtransform {
  from {transform: scale(1.2);}
    to {transform: scale(1.3);}
}


@keyframes transform-out {
    from {transform: scale(1.2);}
    to {transform: scale(1.0);}
}