Vimeo overlay permanent removal on hover

Question

You will see when you go to the website that we needed an overlay on top of the embedded video from Vimeo so we could show the title of the video. The Vimeo title didn't fit with the sites intended style.

So the idea is that users can see the title of the video but as soon as the mouse hovers over it the overlay should disappear so the video can be played and viewed. I got the overlay layer to be click through by using pointer-events: none; so the overlay didn't obscure the controls below.

I've used the attached code to achieve this but it has shortcomings. On hover the overlay is removed but it comes back when mouse leaves obscuring the video. I would like to fix this so that the titled overlay doesn't return.

After looking at various examples on this site I added the animation-fill-mode: forwards; to achieve this but it didn’t work.

Just to reiterate: The overlays need to disappear on hover completely. They should only return when the video has finished and a different video has been selected.

Some links I used to find answers that either didn't work or didn't do what I intended them to.

Not quite: Animate CSS Overlay to FadeIn and FadeOut

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

I was hopeful, denied: 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>

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

The reason animation-fill-mode wasn't working like you expect here is that it only applies while the video is in its hover state. As soon as you mouse out, it reverts. The easiest way to get the result you're looking for is to use some JavaScript, in this case jQuery.

As for keeping the overlay hidden until the video disappears, that will require you using Vimeo's API. Here's another SO question and answer that may help: Fire event when vimeo video stops playing?

Here's a demo I adapted from your code (the video doesn't work because StackOverflow's iframe sandbox rules prevent Vimeo's JS from executing, so here's a 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>

edited May 23 '17 at 12:07

Community

1
1

answered Apr 05 '16 at 18:50

mattsven

22,305
11
68
104

Hi Mattsven, The pen looked like it would work. But now it's in my website it doesn't work as expected. Could there be something interfering? If you go to the test here - justsomediahouse.co.uk/robertdelmaestro - you can see that the overlay fades out on page load. – Surya Osborne Apr 06 '16 at 09:48
It seems there's a different problem at play here, as the code you've added from my answer isn't being run (see console error: `$ is not a function`). The `jQuery` variable is available though, so it seems like you've got `jQuery.noConflict()` on, perhaps? – mattsven Apr 06 '16 at 11:13
First I tried changing the $ to jQuery which didn't work. Then I tried adding this just after in header.php to be able to use $ again. That didn't work either. The honest answer is that I don't know how to use firebug and I've only got a small amount of knowledge when it comes to jQuery. – Surya Osborne Apr 06 '16 at 13:23
You've changed the HTML for the videos, so the jQuery snippet above no longer works. The basic principle is this: instead of using a `.video:hover` state to fade out the overlay, use a class, like I've used `.hovered` in the jQuery snippet. Then your version of the snippet will look something like `$(".video").on("mouseover", function(){ $(this).addClass("hovered"); });` The idea is that when the mouse is 'over' the video element, jQuery adds the class that fades the overlay: `
` – mattsven Apr 06 '16 at 14:32
Hey Mattven, I tried to get this working on http://justsomediahouse.co.uk/robertdelmaestro/ I've used your code properly now, but what happened was that the overlay faded and was gone as the page loaded. I got to see it for a fraction of a second. But now I have moved the overlay div code below the iFrame code and it's only gone and worked!!! Excellent. Thanks for your advise and code. Now onto what you said previously about getting the overlay to reappear after the video has stopped playing - would that be a Vimeo API thing? Or can I use jQuery for that? – Surya Osborne Apr 07 '16 at 11:18
@SuryaOsborne You'll have to use the Vimeo API. See the question I linked to above. – mattsven Apr 07 '16 at 11:28
Thanks again. Do you know how would I go about enabling this effect on touch devices like the iPhone and iPad?? – Surya Osborne Apr 08 '16 at 08:57
@SuryaOsborne Yes. In the code above, `$(".video").on("mouseover")` is what tells jQuery to listen for `mouseover` events on the `.video` element. On most mobile devices, the equivalent event is called `touchend` (the end of a user's touch, when they lift their finger from the screen). You can use `on("mouseover touchend")`, then, to get the same/similar effect on mobile devices. – mattsven Apr 08 '16 at 17:49
Thanks for all your help. We had to scrap the first code you sent me which provided a solution to the problem I initially posed. It was decided that the title needed to be reinstated once the video had been watched. So the code I posted first is being used. I guess that's the way it goes sometimes. You answered the question and thanks for doing so. – Surya Osborne Apr 13 '16 at 09:32

score 0 · Answer 2 · answered Aug 22 '22 at 19:49

0

If you are using iframe to show vimeo videos on Flutter web, ensure you are on the latest version of Flutter, and that ClipRRect is not a parent ancestor to your widget that renders the video player

answered Aug 22 '22 at 19:49

Johngorithm

371
2
8

Vimeo overlay permanent removal on hover

2 Answers2