Forge comes with the ability to add a video to the background of any row. You can use the page builder to create attention-grabbing content, with animated blocks and content on top of it.
Creating a Simple Video Background
When editing a row, open the Background tab. In there, you will find a field named Video Background.
Here you can add a MP4 file hosted anywhere on the Internet, or on your WordPress installation. The file must be a valid MP4 video such as the following:
Once you add the URL of your video, the row will refresh itself and add the animation.
Video backgrounds are displayed on top of the usual background color and image, so it’s preferable that you use either an image or a video, but not both at the same time. Doing this will make your page lighter and faster.
Adding an Overlay Color
Using a video background may cause your content to become a bit hard to read. In that case, you might want to add an overlay color on top to attenuate the video a bit.
To do that, rows have a field named Background Overlay and Overlay Opacity.
Setting an overlay color will add a second background on top of the video (and usual background image too). Then, you can use the opacity setting to change the intensity of this overlay effect. Depending on the image or video that you use, you might want to make the overlay mor solid or transparent.
Best Practices for Video Backgrounds
Unlike images, videos are a lot heavier and take more resources to play. To keep your pages light, it’s recommended that you follow these tips:
- Use small videos with short animations
- Try not to use more than one video per page
- Videos with small resolutions are recommended.
Video backgrounds in Forge play automatically, are looped, and have no sound. They also scale to cover the entire row, so make sure to pick a video that has the right aspect ratio.