Video Background

Demo

This demo displays a video background with a green-ish overlay set atop of it.

Video Background

Compatibility

When creating a video background, you want to make sure your video file sizes are adequate enough for browsers. Upload a 100mb file and using it as a video background will not work out so well. Although there are no hard and fast rules, we like to stay below 12mb for each file size. This ensures the user can play the video smoothly without interruptions.

Finding Your Container

Your container tells Video Background where to place the video background.

  1. Make sure your browser has some type of Developer Tools
  2. Right click in the area that you would like your video background placed, and select Inspect Element
  3. Copy the class/id associated with the highlighted element
  4. Paste this class/id in the container field in Video Background.

Note: This video is from Video Background Pro tutorials, however, the process still applies.
Important: Classes are prefixed with a period (.) and IDs are prefixed with a pound sign (#)

Using the Shortcode

To use the shortcode, simply paste it in the content editor, and specify the necessary fields. The shortcode is below:

Note: You do not have to include every parameter, only the ones that differ from the default

Parameters

container
(String) (Required) The container value. This is where your video background will go. Accepts:
  • Class
  • ID
  • Element
Default: ""
mp4
(String) (Optional) The .mp4 file link. Only necessary if you are using a self-hosted video background.
Default: "#"
webm
(String) (Optional) The .webm file link. Only necessary if you are using a self-hosted video background.
Default: "#"
poster
(String) (Optional) The fallback image for mobile devices and browsers that can’t display video backgrounds.
Default: "#"
muted
(Boolean) (Optional) The muted toggle. Accepts:
  • true
  • false
Default: "true"
loop
(Boolean) (Optional) The loop toggle. Accepts:
  • true
  • false
Default: "true"
overlay
(Boolean) (Optional) The overlay toggle. Accepts:
  • true
  • false
Default: "false"
overlay_color
(String) (Optional) Specify the color of your overlay as a hex color.
Default: "#000"
overlay_alpha
(String) (Optional) Specify the amount of transparency your overlay will have. Accepts a value between 0.00 and 1.00 with 0 being completely transparent and 1 being not transparent at all.
Default: "0.3"

Using the Metabox

Using the included metabox is the standard way to include a video background on your page or post. If you used the free version of Video Background on the WordPress repo, you should be familiar with this approach.

  1. Navigate to the post/page you would like the video background to appear on
  2. Find the Video Background metabox under the content editor
  3. Fill out the required fields and optional fields as desired
  4. Save the page/post

Add Custom Post Types to Metabox

To add the Video Background metabox to a custom post type, add the function below to your functions.php file. In the $post_types array, add your desired custom post types.

Still Need Help?

Push Labs offers support for Video Background through our WordPress plugin page. If you would like premium one-on-one support, you can purchase Video Background Pro.