Using Video Backgrounds in the Funnel & Website Builder

In the ever-evolving digital landscape, standing out is more important than ever. One way to create visually appealing and engaging web pages is to use video backgrounds. In the Funnel & Website Builder of the Referins, integrating video backgrounds is a straightforward process. This article will guide you through the steps to effectively use video backgrounds for a dynamic and compelling user experience.

Prerequisites

1. A working knowledge of the Referins Funnel & Website Builder
2. Access to video files that you wish to use as backgrounds
3. Background Videos Only Support HTML5 Standard Video Formats (MP4 and WebM) and it's only available to the new builder. Video background will be available for sections, rows, or columns within the builder.

Why Use Video Backgrounds?

Using video backgrounds can:

1. Capture attention immediately
2. Convey your message in a visually stimulating manner
3. Add depth to your webpage design

How to Add a Video Background

Step 1: Choose Your Video File

The first thing you need to do is choose a video file that complements the content of your website or funnel. Make sure that the video is in a compatible format, such as MP4 and WebM.

Step 2: Access the Funnel & Website Builder

• Log in to your Referins account. Head over to Sites.
• Navigate to the Funnel or Website Builder section.

Step 3: Select the Element

• Open the webpage where you want to add the video background.
• Select the element (like sections, rows, or columns ) where you wish to place the video background.

Step 4: Add the Video

• On the right-hand panel, you’ll find an option for BG Meda Types.
• Select 'Video' from the available background types.
• Upload your chosen video file or insert the URL if the video is hosted externally.

Step 5: Save and Preview

Once the video has been uploaded, don't forget to save your changes and preview the webpage to ensure that everything looks as expected.

Best Practices

1. Use videos that are short and loop well.
2. Make sure the video complements the text and other elements on the page.
3. Always have a fallback image for scenarios where the video cannot be played.
4. Ensure that the video is optimized for mobile views.

Troubleshooting

1. Video Not Playing: Make sure the video is in a compatible format and that the URL is correct if hosted externally.
2. Slow Loading: Large video files can affect the loading time. Try to optimize the video size without compromising the quality.
3. Mobile Issues: Some mobile browsers disable autoplay. It’s good to have a fallback image in such cases.

FAQs

1. What types of video formats are supported for video backgrounds in the Funnel & Website Builder?
   • The Funnel & Website Builder supports HTML5 standard video formats, specifically MP4 and WebM. Ensure your video file is in one of these formats for compatibility.
2. Can I use video backgrounds in any section of my webpage?
   • Yes, you can add video backgrounds to sections, rows, or columns within the Funnel & Website Builder.
3. How do I add a video background to my webpage?
   • To add a video background, log in to your CRM account and go to Sites > Funnel or Website Builder. Select the element (section, row, or column) where you want to add the video background, choose 'Video' under BG Media Types on the right-hand panel, and upload your video file or insert its URL.
4. What should I do if my video background is not playing?
   • If the video is not playing, ensure it is in a compatible format (MP4 or WebM) and that the URL is correct if the video is hosted externally. Also, check that the video settings are correctly configured in the builder.
5. How can I optimize video backgrounds for better performance?
   • To optimize performance, use videos that are short and loop well, and ensure the video file size is optimized to reduce loading time without compromising quality. Also, provide a fallback image in case the video cannot be played.
6. Are video backgrounds supported on mobile devices?
   • Video backgrounds are supported on mobile devices, but some mobile browsers may disable autoplay. It's recommended to include a fallback image for mobile viewers.
7. What is the best practice for adding video backgrounds in terms of design?
   • Use videos that complement the text and other elements on your page, ensure they are short and loop smoothly, and have a fallback image for scenarios where the video cannot be played. Always preview your webpage to check the video background’s alignment with the overall design.
8. What should I do if my webpage with a video background is loading slowly?
   • Slow loading times can occur with large video files. Optimize the video size by compressing it or reducing the resolution while maintaining acceptable quality. Consider using a shorter video loop to further reduce file size.
9. Can I use externally hosted videos as backgrounds?
   • Yes, you can use externally hosted videos by inserting their URL into the BG Media Types section under 'Video.' Ensure the URL is correct and the video format is supported.
10. Is there an option to preview the video background before publishing the page?
    • Yes, after adding your video background, you should save the changes and use the preview option to ensure the video appears and functions as expected on your webpage.
11. Why should I have a fallback image for video backgrounds?
    • A fallback image is important because some devices or browsers may not support video playback, especially on mobile. The fallback image ensures that your design remains visually appealing even when the video cannot be displayed.