Landing page sections can have a video background. We do not generally recommend this because video backgrounds have a tendency to increase the time it takes for a page to load and also lower the conversion rate you’ll see in your campaign.
Now that you’ve read the warning… Here’s how to add a video background to a landing page section.
- Open the section editor by clicking the pencil in the upper right corner of a section.
- Paste the URL of a valid MP4 file hosted elsewhere on the internet into the “Video Background URL” text box.
You should now see a video playing in the background.
Once the video is on the page you can also change the background color that will overlay the video. This could help text above the video show on top of busy videos. You can even still use gradients on top of the video background as shown here:
Where can I find good video background files?
Where can I host video background files?
Most premium video hosting sites will give you the ability to link directly to the video file.
We recommend Vimeo. They automatically generate several size/quality options for you to choose from for each video. Here is how to get the direct file links from them.
If Your Video Isn’t Showing…
These are some common things to check if you are not seeing a video on your published page.
- Are you linking directly to a valid video URL? The URL must end in .MP4 and can not simply be a link to a youtube video. You can try using a sample video link here to verify it’s working: https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/708209935.mp4
- Is the too large? We recommend keeping your video backgrounds quick to download and under 5MB in size. Larger files may cause the background not to show – especially on slower networks or mobile devices.
- Did you remove the background image? Background images and videos are not compatible. The image will win and overlay the video. Remove the background image to see the video.
- Is your background color transparent? The video background will NOT show if the background color defined is solid. Make sure to add some transparency to the section background color by using the slider on the right side of the color picker.
Still having issues? Please email firstname.lastname@example.org and include a link to the video you are trying to use.