Streaming live at 10am (PST)

How to play a video on hover?


#1

Hi there. I want to make a section whereas viewers can hover on a button to play a video. I have viewed the topic "how to make a background video" on the forum and it was very helpful. Sadly, it seems that technique does not works here.

To be exact, I'm trying to achieve something like this: http://spacejunk.com/studio

The split video section in that website is wonderful and my client request that their website have a section that work & look EXACTLY like that. I have tried many ways in Webflow to cheat so that it would look similarly, however until now, I have had no luck.

Could anyone give me a tip on how to make a button which play background video? Any additional tip on how to make the split section on the website above is also a welcome since I'm struggling here stuck_out_tongue.

Thanks very much.


Background video play on hover - only works on first CMS video
#2

Nice reference. Spacejunk site doesn't have video bg on mobile so make sure your client don't require them, would be a whole lot more work to consider.

Autoplay on hover isn't achievable by default with webflow. You'll need Javascript to do that.


#3

Hi thanks for your reply. I guess there's no easy way to do it. How about the half-screen mask? Is it achievable in some way?


#4

It's a bit tricky. You can try to use SVG masks with custom code, but if you analyse the reference layout, there's a bit of complexity... Its not just one portion that is masked and a big layer underneath, it works both ways, so I don't really know how it's built.


#5

Oh thank you. I guess I will try SVG to see if it could be done or not. Thanks for your attention.


#6

@lyse How did you end up doing this? Can you share a public link with us? I'm interested to see smile


#7

If you have a video embedded just give it a class within the "embed" widget area and also give the div container holding the embed widget a class.

Structure like this:


  <div class="video" >
      <HTML Embed>
        <video class="thevideo" width="100%" height="auto" preload="auto" muted loop>
		<source src="VIDEO.MP4" type='video/mp4;' />
	</video>      
      </>
  </div>

The outer div needs a class, that you ll call within the javascript on the first event:

.video

And you ll need a class within the Embed code on the video itself:

<video class="thevideo" width...and so on />

then return to the dashboard and use this javascript code within the "Footer Code":

<script>
    $(document).ready(function() {       
        $('.video').each(function(i, obj) {
            $(this).on("mouseover", function() { hoverVideo(i); });
            $(this).on("mouseout", function() { hideVideo(i); });
        });
});

        function hoverVideo(i) {  
                $('.thevideo')[i].play(); 
        }

        function hideVideo(i) {
                $('.thevideo')[i].currentTime = 0; 
                $('.thevideo')[i].pause(); 
        }
</script>

If you then hover over the div with the class "video" it will then run a function "hoverVideo" or "hideVideo" either if you mouseover the div or not.

Regards
Daniel

p.s. if you want the video just to pause and play it again with the next hover, remove the line $('thevideo')[i].currentTime = 0; from the function "hideVideo".


Background video play on hover - only works on first CMS video
Autoplay Video on Hover
#8