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 make a lightbox video autoplay in Webflow and ensure the navbar appears underneath the lightbox modal, follow the steps below.

​

1. Enable Autoplay for the Lightbox Video

​

Webflow’s native Lightbox component does not provide an autoplay option directly in the interface, but you can autoplay a video by modifying the video URL.

​

• Use a YouTube or Vimeo video and add custom parameters to the video URL:
• YouTube: Add ?autoplay=1&rel=0&mute=1 to the video URL. 
  • Example: https://www.youtube.com/watch?v=xxxxxxx?autoplay=1&rel=0&mute=1
  • Note: Autoplay will only work if the video is muted, due to browser policies.
• Vimeo: Add ?autoplay=1&muted=1
  • Example: https://vimeo.com/xxxxxx?autoplay=1&muted=1
• Inside the Lightbox Link element, click the gear icon (Settings) and paste the modified video link in the video URL input.

​

2. Set Navbar to Be Behind the Lightbox

​

To ensure the navbar doesn’t appear over the Lightbox modal, adjust the z-index settings.

​

• Select your Navbar element and go to the Style panel.
• Set Position to Relative or Absolute (depending on your layout).
• Set Z-index to a lower value (e.g., 1).

​

Then check the Lightbox modal container (Webflow uses default classes for modals):

​

• The Lightbox modal automatically uses a high z-index (e.g., 1000+), so just ensuring your navbar is below this (e.g., z-index of 1 or 10) will prevent overlap.

​

If your navbar still appears above the modal:

​

• Check if any parent wrapper of the navbar has a high z-index.
• Remove or reduce the z-index from those parent elements.

​

Summary

​

To autoplay a lightbox video in Webflow, modify the video URL with autoplay and mute parameters, especially for YouTube or Vimeo. To ensure your navbar stays behind the lightbox, reduce its z-index to below modal default values (typically <1000).