jquery - Vimeo 覆盖在悬停时永久删除

Question

网站链接:http://robertdelmaestro.com/

当您访问该网站时，您会看到我们需要在来自 Vimeo 的嵌入式视频之上覆盖一层，以便我们可以显示视频的标题。 Vimeo 标题不符合网站预期的风格。

所以这个想法是用户可以看到视频的标题，但是只要鼠标悬停在上面，叠加层就会消失，这样就可以播放和观看视频了。我通过使用 pointer-events: none; 来点击覆盖层。所以叠加层不会遮挡下面的控件。

我已经使用附带的代码来实现此目的，但它有缺点。悬停时，叠加层会被移除，但当鼠标离开遮挡视频时，它会恢复。我想解决这个问题，这样带标题的叠加层就不会返回。

在查看了本网站上的各种示例后，我添加了 animation-fill-mode: forwards;实现这一目标，但没有奏效。

重申一下:叠加层需要在悬停时完全消失。他们只应在视频播放完毕并选择其他视频后返回。

一些我用来查找答案的链接要么不起作用，要么没有达到我的预期。

不完全是:Animate CSS Overlay to FadeIn and FadeOut

差不多:http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

我满怀希望，被拒绝:Adding a overlay layer on an embedded vimeo player

.box {overflow: hidden; position: relative;}
.box iframe {position: absolute; left: 0;}

.box .overbox {
  background-color: #fff;
  border: 1px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  opacity: 1;
 width: 100%;
 height: 100%;
  padding: 40px 20px;
}

.box:hover .overbox { 
animation-name: fadeboxinandout;
animation-duration: 2s;
pointer-events: none;
animation-iteration-count: 1;
animation-fill-mode: forwards;}

@keyframes fadeboxinandout { 
0% {opacity: 1;}
100% {opacity: 0;}

}

.box .title {
text-align: center; font-size: 1em; color: #387e9f;
}

<div class="box"><iframe src="https://player.vimeo.com/video/161447671" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0" height="281" width="500"></iframe><div class="overbox">
    <div class="title overtext">Mr Selfridge<br>Ep1 S4</div>
  </div>
</div>

Answer 1

animation-fill-mode 在这里没有像您期望的那样工作的原因是它仅在视频处于悬停状态时适用。一旦你鼠标移开，它就会恢复。获得所需结果的最简单方法是使用一些 JavaScript，在本例中为 jQuery。

至于在视频消失之前保持叠加层隐藏，这需要您使用 Vimeo's API .这是另一个可能有帮助的 SO 问答:Fire event when vimeo video stops playing?

这是我根据您的代码改编的演示(视频无法播放，因为 StackOverflow 的 iframe 沙箱规则阻止 Vimeo 的 JS 执行，所以这里是 Pen)

$(function(){
  $(".video:not(.hidden-overlay)").on("mouseover", function(){
    $(this).addClass("hidden-overlay");
  });
});

@keyframes fade { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}

body {
  font-family: Helvetica, Arial, sans-serif;
}

.video {
  height: 281px;
  width: 500px;
  position: relative;
  
  border: 1px solid #000;
}

.video .overlay {
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  
  color: #000;
  background: rgba(255, 255, 255, .7);
  
  text-align: center;
  text-transform: uppercase;
  font-size: 40px;
  
  padding-top: 22%;
}

.video.hidden-overlay .overlay {
  pointer-events: none;
  
  animation-name: fade;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.video iframe {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video">
  <div class="overlay">A Video</div>
  <iframe src="https://player.vimeo.com/video/161447671" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe>
</div>