Adding a background video to your website can instantly elevate its visual appeal, turning a static experience into something dynamic and engaging. Whether it's for your hero section or any other part of the page, a well-placed video can set your website apart. In this article, we’ll guide you through the steps to easily swap out static images for videos using CodeDesign’s design library.

Feel free to clone and add this project to your account using this link.

Video Guide | Adding Background Video to your Page

This article is paired with a youtube video guide that goes through the same process to make things easier. Feel free to watch the video if you prefer so.

Step-by-Step Guide on Adding Background Video to your Page

Step 1: Set Up the Hero Section

To begin, you’ll need to start by selecting a hero section from the design library. After dragging and dropping the section onto your canvas, go ahead and publish the page. When you check the published version, you'll notice the hero section takes up the full height of the screen (also known as Viewport Height or VH). This means it spans the entire visible area of your browser window.

Step 2: Replacing the Background Image with a Video

Now it’s time to swap the default image for a video. The process is straightforward: you’ll be embedding a video inside a new section that fills the entire width and height of the hero area.

Add a New Section: Head back to the builder, and drag a new 'section' element into the hero section. You can confirm it's in the right spot by checking the layers panel.
Add a Gradient Layer: Rename the new section to "gradient." This gradient will help ensure text and other content remain readable when the video plays.
Create a Fallback Image Section: Duplicate the gradient section and rename it to "hero BG image." This section will serve as a fallback in case the video doesn’t load, particularly on mobile browsers like Safari.

Step 3: Adding the HTML Video Element

Now, you’ll need to embed the video using the HTML code:

Drag and drop the 'HTML Code' element into the hero section. If it doesn’t land in the right spot, you can adjust its position using the layers panel.

Paste the following HTML code into the HTML Code element’s settings.

Code Snippet for Background Video

<video width="100%" height="100%" play="true" autoplay="autoplay" muted loop playsinline style="transform:scale(1.0); 
object-fit : cover;
position:absolute;" >
  <source src="https://cdn.cdsn.me/v1/storage/buckets/66f26a5fe33610a8ffcd/files/66f3ca08568d8ca497ba/view?project=63e727dfc53e6679e400" type="video/mp4"  >
</video>

You can replace the default video URL with your own, or choose from the selection of videos hosted on CodeDesign’s servers. The video will now play as the section's background.

Step 4: Setting Up the Fallback Image

For times when the video may not load, it’s crucial to have a fallback image in place:

Select the "hero BG image" section and add a background image. You can use a free image from Unsplash or another source.

Step 5: Customizing the Gradient for Readability

To ensure text and other elements remain clear on top of the video, customize the gradient:

In the ‘gradient’ section’s background settings, modify the colors and opacity to create a subtle fade from dark to light. This will enhance readability without taking away from the video.

Step 6: Adjust Z-Index Values for Proper Layering

To make sure everything is displayed in the correct order, you’ll need to adjust the z-index for each layer. The z-index controls the stacking order of elements:

Set the z-index of the video to 100.
Assign a z-index of 200 to the background image.
Give the gradient a z-index of 300.
Finally, set the content layer (text and other elements) to 400, ensuring it appears above everything else.

Step 7: Ensuring Full-Screen Display

Next, ensure all layers (video, background image, and gradient) cover the full height of the hero section:

Set the height of each element to 100% in the layout settings.
Make sure their positions are set to "absolute," which ensures they cover the entire section.

Step 8: Displaying the Fallback Image on Mobile

To finalize the setup, you’ll want to make sure the fallback image only appears on mobile devices:

Set the "hero BG image" section’s display to "none" for desktop and tablet views. Keep it visible for mobile.

Final Touches

Once everything is set, you can go ahead and delete the default images and gradients that came with the section. Add additional elements from the design library to complete the page.

Conclusion

And that’s it! You’ve now successfully added a video background to your CodeDesign project, complete with a fallback image for mobile users. This simple yet powerful technique can significantly enhance the interactivity of your website.

If you have any questions or need further assistance, feel free to reach out through our support channels or visit the CodeDesign forum. Happy designing!