In this tutorial, I’ll walk you through creating an eye-catching video loop banner in the Flatsome theme, complete with a play button to open the full video in a lightbox. Adding video banners can bring life to your website and engage visitors instantly, and this guide will show you the entire process, from preparing the video file to embedding it in your Flatsome layout.
We’ll cover everything you need, including video optimization for fast loading, adding an overlay for readability, and ensuring the banner looks great on all devices. Let’s dive in and transform your site with this dynamic visual feature!
Step-by-Step Tutorial
1. Prepare the Video for Looping
- Download the video file you want to use. For example, we’ll use a WeWork video from YouTube, saved as an MP4 file.
- Open your video editor (like iMovie for Mac) and upload your video.
- Remove the Audio: Detach and delete audio to reduce file size, making it faster to load.
- Trim the Video: Select a short section (ideally 10 seconds or less) for smoother looping and to keep the file lightweight.
2. Optimize and Export the Video
- Export your video with lower quality settings to ensure it stays around 3–5 MB. This helps load times without sacrificing visual quality.
- Save the file as “video loop” or something similar for easy access.
3. Upload the Video to WordPress
- Go to your WordPress dashboard, then click on Media > Add New.
- Upload your video file and copy its URL link (found by clicking on the file in the Media Library).
4. Embed the Video in Your Flatsome Banner
- Open your page in UX Builder and navigate to the section where you want to add the video.
- Select the section or banner element, scroll to the video settings, and paste the video URL.
- Check to see if the video loops as expected. Adjust the opacity overlay if needed to make text over the video readable.
5. Add a Fallback Background Image
- Capture a screenshot of your video’s opening frame and upload it to Media in WordPress.
- Set this image as the background for the section. This way, if the video is delayed in loading, visitors see a still image first.
6. Make the Video Mobile-Friendly
- In the UX Builder section settings, make sure the video element visibility is set to Desktop, Tablet, and Mobile. This ensures the video plays on all devices.
7. Add a Play Button for Full Video View
- In UX Builder, add a button element below or over your video section.
- Set the button text to “Play Video” and choose a color to make it stand out.
- Add a play icon to the button for clarity, setting its position to the left of the text.
8. Link the Button to the Full Video
- Copy the full video URL from YouTube or Vimeo and paste it into the button’s link field in UX Builder.
- Add the CSS class
open-video
to the button to enable lightbox-style video playback.
9. Save and Preview Your Page
- Save your changes in UX Builder, then preview the page to ensure the video loop plays, the play button opens the full video in a lightbox, and everything looks great on all devices.
10. Final Touches
- Test the page on both desktop and mobile to confirm everything is functional.
- If satisfied, publish your changes and enjoy your engaging new video loop banner!
And that’s it! You’ve now successfully added a video loop banner to your Flatsome site, complete with a play button to open the full video in a lightbox. This setup adds visual appeal and interactivity to your site, helping you engage visitors right from the start. By following these steps, you ensured the video loads quickly, displays clearly on all devices, and offers a fallback image in case of loading delays. Give your page a final review on desktop and mobile to ensure everything looks perfect. Great job, and good luck with your Flatsome projects!
Continue learning
Need a custom design? Hire Seb today
Get the #1 All In One Design Agency for Flatsome