悬停时 Vimeo 覆盖永久删除

Question

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

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

所以我们的想法是，用户可以看到视频的标题，但只要将鼠标悬停在它上面，覆盖就会消失，这样就可以播放和观看视频了。我通过使用指针事件点击覆盖层：无；所以叠加层不会遮挡下面的控件。

我已经使用附加的代码来实现这一点，但它有缺点。悬停时，覆盖被删除，但当鼠标离开遮挡视频时，它又回来了。我想解决这个问题，以便标题覆盖不会返回。

查看本网站上的各种示例后，我添加了动画填充模式：转发；实现这一目标，但没有奏效。

重申一下：覆盖层需要在悬停时完全消失。只有在视频播放完毕并选择了不同的视频时，他们才应该返回。

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

不完全是：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>