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

Design help General
1

Hi there,

I have a list of videos linked to a custom code widget on the CMS. I want them to trigger the play on hover, but turns out that only triggers the FIRST video in the list.

What I want to achieve is trigger the play on hover and on mouseout pause it and reset the time to the beginning of the video again, so it always matches the image and the first frame of the videos.

The only way all of them work is when “autoplay” is set in the custom code widget, but then all the videos in the page are playing at the same time and it kills the performance. Having 6 to 10 videos playing at the same time in a webpage is not good practice at all…

I followed this thread to achieve the result How to play a video on hover? but as I said it only triggers the first video.
Also, this javascript code returns an error in browsers related to the “play” function (maybe related to this link? DOMException - The play() request was interrupted - Chrome Developers). Unfortunately I’m not a pure developer and I don’t know how to solve the issue.

Is there a solution/workaround here? Help would be much appreciated.

Thanks,
Ferran

Here is my site Read-Only: https://preview.webflow.com/preview/rollin-3577f3?preview=0f1535393a7cae35ea5cca084cb00306
(how to share your site Read-Only link)

2

Yeah send a message directly to support for this. They’ll have more options to offer.

3

Thanks for your suggestion @garymichael1313.
I tried that on first place, but they said explicitly in the contact form:

"
Unfortunately we’re not able to help with design or custom code related questions. That includes:
Any script, application, or content you or your clients add
Custom code, SEO, or 3rd-party integrations
Visual/UX/UI design questions or preventable issues
Changes made by malware or installed extensions
Integration of code exported from Webflow in other platforms
The Webflow Forum is a great place to discuss and get help for these types of questions.
"
I guess I am in a dead end here?

4

It’s an interesting topic and you’ve implemented it well I think. I was planning to use such a behavior in one of my projects so I’m downloading some of your vids to try on my own. Stay tuned.

5

Thanks @vincent
Much appreciated :slight_smile:

6

Maybe laggy because 6 videos are playing along but so far I have the dynamic bgs playing together, using the structure you imagined.

I simplified your code because z-index:-1, absolute etc are overly complicated. Also you omitted the Autoplay attribute.

So it’s not working on hover yet but I guess it could. Careful that it’s a very demanding page… many videos playing along represent quite a heavy load.

Can you check from there and see what you can fix on your side? Here are the published site + sharing link.

http://vincents-cool-project-9ccade.webflow.io/

https://preview.webflow.com/preview/vincents-cool-project-9ccade?preview=c5d0f95e83a5508dfd461d6c621e04b5

7

Thanks for your time @vincent

First, thanks for the clarification on my code. Although I got some html/css knowledge I am not a developer - I am a designer, that’s why I am introducing Webflow in my pipeline.

I guess what I’m trying to achieve is to trigger the videos ONLY on hover, so they are not autoplaying since the page loads. That definitely will kill the performance of the page. That’s why I removed the “autoplay”.
I would like to find a way to trigger the play on hover that works in all the videos of the same collection. So far I can only be able to trigger the first on the collection list…

Let me take a look thoroughly at your code and see if I can manage to figure it out.

I’ll let you know

Thanks a lot

8

Such control of videos is difficult. Controlling various videos play/pause/stop usually requires javascript code, or using Youtube or Vimeo with their respective APIs. It’s definitely a developer’s work and it’s not something I’m personally capable of.

9

Yep @vincent . So far I used some custom javascript that another member of WF community (@Daniel_Schultheiss ) shared in a similar topic. But as I said it only plays the first video on the collection list…

<script>
  $(document).ready(function() {       
     $('.videobgjs').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>

I’ll try to figure something out. Speak with some js dev maybe. If I find a good solution I’ll post in here. If not I would have to change my layout.

10

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.