Noir: How to edit the background videos on Noir homepage

There are a couple of sections on the Noir homepage that use video backgrounds: ‘The Purposeful Pursuits’ (Podcast) section and ‘The Prestige Brand Blueprint’ (Lead Magnet) section. I’m going to show you how you can replace the background video in the ‘Purposeful Pursuits’ section, but the process is the same for any other section.

In your page editor for the homepage, click the 3-bar icon at the top of the screen labeled ‘Document Overview‘. You will then see a list of your sections; click on ‘Podcast‘.

Next, on the right-hand side of your screen, a control panel for that section should appear. If not, click the ‘Settings‘ icon. Then, click the Style tab. Under “Background Video,” click “Edit Video.” Choose the video you want to replace it with.

The demo video is stored locally, but you can also select the source from an external site like Vimeo or YouTube. Under “Background Video Type” you should see the option to choose it.

In the demo, I’ve set the video to show only on desktops for best practice, since videos often slow down websites on phones and tablets, leading to poor performance. I’ve chosen a static image for tablet and phone users instead.

To replace the demo image, click the tablet icon. “Set Custom Background for Tablets” should be on. Under “Background Image,” click “Edit Image” and replace the existing image with a new one. Leave the mobile setting empty; it will automatically use the tablet settings.

If you prefer using video for tablet and mobile users anyway, you can disable the “Set custom background for tablets” option.

In the demo, I also added an overlay color. You can access this feature through the “Background Overlay Settings” tab. Here, you have the flexibility to adjust the overlay’s opacity according to your preference, change the color of the overlay, or even turn off the overlay feature completely.

Don’t forget to hit Update to save your changes.