Creating Video Backgrounds In A Page

← Back to Advanced

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:

http://techslides.com/demos/sample-videos/small.mp4

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.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrBuffer this pageEmail this to someone

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match