Question

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

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

因此，用户可以看到视频的标题，但只要鼠标悬停在其上，叠加层就会消失，以便播放和观看视频。我通过使用pointer-events：none来点击覆盖层。所以叠加层并没有掩盖下面的控件。

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

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

重申：叠加层需要在完全悬停时消失。它们只应在视频播放完毕且选择了不同的视频时返回。

我过去常常找到一些链接，这些链接要么不起作用，要么没有按照我的意图行事。

不完全：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。这是另一个可能有用的问题和答案：Fire event when vimeo video stops playing?

这是我从您的代码改编的演示（视频无法正常工作，因为StackOverflow的iframe沙箱规则会阻止Vimeo的JS执行，所以这里＆＃39; sa {{ 3}}）

＆＃13;

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

＆＃13;

@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%;
}

＆＃13;

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

＆＃13;

Vimeo覆盖永久删除悬停

1 个答案: