溢出：使用变换缩放 YouTube iframe 时隐藏不起作用

Question

到目前为止，我已经检查了以下问题/答案...

a: add scrolling="no" to iframe 和

b: add "?wmode=opaque" to the iframe source link

这两个问题都很老了，但我尝试了一个，然后是另一个，然后是两个，以及其他几个我知道不会工作的 cmets 提供的解决方案。

<!-- YOUTUBE -->
  <div class="row containerStyle" style="position: relative;">
    <div class="col-sm-12">
      <div class="badge badge-pill pillStyle">
      <span  class="ytImage">
        <span class="g-ytsubscribe text-left" data-channel="xyz" data-layout="default" data-count="default">
          <script src="https://apis.google.com/js/platform.js"></script>
          <div class="g-ytsubscribe" data-channel="xyz" data-layout="default" data-count="default"></div>
        </span>
      </span>
        <a href="https://www.youtube.com/user/xyz" class="viewAll">VIEW ALL <span class="vaArrow">&rarr;</span></a>
      </div>
      <div id="youtubeWrap">
        <p id="youtubeLabel">ORIGINAL CHOREOGRAPHY<br /> <span id="subytLabel">by: XYZ <br />SONG ft. Artist, Another Guy, DJ Someone</span></p>
        <img src="./images/rip2.png" class="ytimageStyle" />
        <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>
  </div>

我的 CSS：

#youtubeWrap {
  position: relative;
  overflow: hidden;
}

#youtubeWrap iframe, #youtubeWrap object, #youtubeWrap embed {
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#youtubeWrap iframe:hover, #youtubeWrap object:hover, #youtubeWrap embed:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

#youtubeLabel {
  color: #FFFFFF;
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 3%;
  font-weight: 300;
  width: 35%;
  font-size: 20px;
  overflow: hidden;
}

#subytLabel {
  font-size: 14px;
}

.ytImage {
  height: 25px;
  float: left;
  padding: 0 15px;
}

.ytimageStyle {
  z-index: 10;
  position: relative;
  height: 100%;
  width: 40%;
}

.anIframe {
  width: 70%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

我想要完成的是，当用户将鼠标悬停在视频上时，视频会略微放大。但是，我不希望溢出可见。正如我在这里拥有的那样，它“大部分”时间都在工作。如果您反复将鼠标悬停和鼠标移出，溢出将显示大约 1/10 的时间，有时会卡住。我已经进行了大量的尽职调查，但未能找到适合这里的解决方案。

编辑：这张图片是怎么回事，它似乎只是 Chrome 中的一个问题。

EDIT(2)：我刚刚发现了四年前的另一个问题。仍然有点旧，没有什么对我有用，但它是最近的，我想分享所有东西以防我错过了什么。

Bug with transform: scale and overflow: hidden in Chrome

Answer 1

在玩弄了我创建的小提琴之后，我想出了一个可能对你有用的 hacky 解决方案。

* {
  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);}
}

<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>

YouTube 视频似乎没有加载到 sn-p 中，但我已经包含了更新的小提琴：

https://jsfiddle.net/hoxv2ghg/27/

诀窍是使用 CSS 动画并将两个动画应用于悬停状态：transform 和 longtransform。本质上，我们触发了第一个变换，这需要 0.5 秒。我们将长变换设置为 10000 秒，但使变换几乎不可见。 longtransform 中的 scale(1.3) 可能是 1.21，我认为它会起作用。

希望这对您有所帮助。

Answer 2

只需将will-change: transform; 添加到已修复的 IFRAME 样式中即可。