Fullpage.js and webflow's background video element

Design help Custom code
1

Hello,

I want to use the fullpage.js with webflow’s background video element. I’ve had a play around in webflow but it doesn’t seem to work.

I have a div with id “fullpage”
Inside are more divs with the class “section”.
I added a bg video element and gave that the class “section”.

Link to the webflow site.

Link to the published site so you can see the fullpage.js working. (I don’t think the share link allows that?)

Any ideas?

Edit: I’ve just realised the bg video element is a video tag, so I’ve nested that into a div with a “section” class. Now the video is fullscreen and is working with the scrolling but it doesn’t play.

Thanks,
Luke

2
3

Hi Sam,

Thanks for your response. The webflow bg video element has autoplay data variable reserved when I try to add a custom attribute. In the code the video tag has autoplay=autoplay. According to your link, I need to set autoplay=1 or add data-autoplay but the webflow bg video element doesn’t allow me to do that. Maybe I might have to just stop using webflow.

Thanks,
Luke

4

I’m not sure why Webflow would restrict certain attributes from elements. The workaround now is to use embed code to insert your own video element code.

5

I was hoping that wouldn’t be the case. Thanks for your help.

Cheers,
Luke