Fullpage.js not showing HTML embedded videos in published site

Problem: fullpage.js with fullscreen HTML embedded videos is working correctly in WF preview, but the published site shows a white background instead of the videos.

I’m using the fullpage.js plugin to show one fullscreen embedded Vimeo video per section. I’m using the HTML embed element rather than video or background video elements.

I followed this previous post to successfully display the videos in fullscreen at any screen ratio.
And this is the guide I followed for setting up fullpage.js

It’s working as I expect in preview, however once I publish the site all I can see is a white background. I’m guessing there is a conflict between fullpage.js and the div settings within each ‘section’ div.

So I’d like to get this working in the published site of course. It feels like I’m missing something simple, but I’ve read the FAQ and WF discourse without any luck.


Here is the live site: https://video-template-site-8f9aa-dcd71a7884dbf.webflow.io/

Here is my site Read-Only: Webflow - Copy of video-template-site

It turns out the video was being displayed, but my positioning was incorrect so it was off-screen (and hidden by overflow:hidden).

Following this post and making the below changes to @steviegriffin 's guidance I got it working.

1. full width section (class=“section” in fullpage.js)

  • Overflow: default (visible)

2. video wrapper div

  • width: 100% (rather than 1000%)

3. HTML embed element:

  • Change z index to -999 (Otherwise scrolling doesn’t work in fullpage.js)
  • Overflow: hidden
  • inside the embed element (in the iframe code) change the width to 1000%