How can I make a lightbox video autoplay when opened in Webflow? Additionally, how can I ensure that the navbar element is positioned underneath the lightbox when opened?

To autoplay a video in a Webflow lightbox and ensure the navbar stays underneath the lightbox overlay, you’ll need to adjust both video settings and element positioning.

1. Autoplay a Lightbox Video

Webflow's native Lightbox does not have built-in support for autoplaying videos. You need to use a custom embed for this.

• Do not use a native Lightbox component — instead, create a custom modal using Divs, a close button, and an Embed element.
• In the Embed component, add a YouTube or Vimeo iframe with autoplay parameters:
• For YouTube, use ?autoplay=1&rel=0
  • Example: https://www.youtube.com/embed/VIDEO_ID?autoplay=1&rel=0
• For Vimeo, use ?autoplay=1
  • Example: https://player.vimeo.com/video/VIDEO_ID?autoplay=1
• Make sure the modal is hidden by default and shown when a button or thumbnail is clicked using Webflow Interactions.

2. Ensure Navbar Sits Underneath the Lightbox

To keep your navbar underneath the overlay when the lightbox is opened:

• Select the navbar element and go to the Style panel.
• Under Positioning, check if it has a z-index value.
• If yes, make sure your lightbox/modal overlay has a higher z-index (e.g., Navbar = 10, Modal = 9999).
• If the navbar is set to fixed or sticky, it might still appear on top. To avoid this:
• Ensure your overlay covers the full viewport (position: fixed; top: 0; left: 0; width: 100vw; height: 100vh)
• Set overlay's z-index to a high value, such as 9999, to ensure it renders above any fixed elements.

Summary

To autoplay a video in a lightbox, build a custom video modal using a Div and Embed element with autoplay query parameters. To position the navbar beneath the lightbox, overwrite its visibility by giving the modal a higher z-index and ensuring it is fixed to the full viewport.