Adding a Video Background to a Landing Page Section
Strategy guide: Want the bigger campaign playbook behind this setup? Read Landing Page Design.
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.
How to:
Section titled “How to:”- 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.
Options Background Overlay Once the video is on the page you can also change the bac…
Section titled “Options Background Overlay Once the video is on the page you can also change the bac…”kground 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?
Section titled “Where can I find good video background files?”- https://www.storyblocks.com/video
- https://www.istockphoto.com/footage
- https://www.pexels.com/video/
- https://elements.envato.com/stock-video
Where can I host video background files?
Section titled “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
Section titled “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 support@kickofflabs.com and include a link to the video you are trying to use.
Need help? Email support@kickofflabs.com with your campaign URL, the lead email you tested with, and a screenshot of what you expected to happen.