Cannot Scroll on Video element

Hello,

I’m embedding a video in the header, but when the cursor is hovering on the video I can’t scroll down in the page like you would with a trackpad or a mouse scroll wheel. When I set “Events” to None, then that enables scrolling, but then the user wouldn’t be able to play the video. Is there any solution to this on the webflow platform? I’m aware that scrolling on iframes is a known general issue but I’m wondering if there’s a possible workaround on webflow.

Thank you


Here is my site Read-Only: Webflow - Human Energy

2 Likes

did you find a solution? I have the same problem :frowning:

1 Like

Please tag me if you find a solution! I’m having the same issue :frowning:

1 Like

Would like to know if there is a solution too. (edit: it looks like its only in the viewer a problem, not on the published page)

3 Likes

Hi Luc_B, I have the same problem. Question for you: does this problem arise when the website is published, or only in the Webflow Designer? I’m still designing my Webflow website and it hasn’t been published yet (so I can’t test it). Thank you, Luc_B!

Hey everyone. What I did was created a block / section element the width that I wanted the video to be, then inserted a “Code Embed” element into that block that looked like this:

<video width="100%" controls autoplay muted>
  <source src="your public video url here">
  Your browser does not support the video tag.
</video>

You can remove autoplay if you want and the other settings. My scroll worked fine after this and I didn’t have to mess w/ z-indexes or anything. Biggest downside is you have to mess with plain html but :person_shrugging: