Video Background Pro

Installation

  1. Download the .zip file from your Push Labs account.
  2. Go toWordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.

Finding Your Container

Your container tells Video Background Pro 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 Pro.

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: ""
type
(String) (Optional) The type of video background you would like. Accepts:
  • self-host
  • youtube
Default: "self-host"
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: "#"
youtube_url
(String) (Optional) The YouTube URL. Only necessary if you are using a Youtube video background.
Default: "#"
youtube_start
(String) (Optional) The YouTube video background start second if using a YouTube video background.
Default: "0"
youtube_end
(String) (Optional) The YouTube video background end second if using a YouTube video background.
Default: "null"
poster
(String) (Optional) The fallback image for mobile devices and browsers that can’t display video backgrounds.
Default: "#"
end_frame_poster
(Boolean) (Optional) The end frame poster toggle. This value will add the poster to the video background once it stops playing if applicable. Accepts:
  • true
  • false
Default: "false"
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"
overlay_texture_url
(String) (Optional) If you want an image pattern instead of an overlay color, you can specify the link with this parameter. Take note if this field is active the overlay_color and overlay_alpha will not be used.
Default: "#"
frontend_play_button
(Boolean) (Optional) Frontend play button toggle. Accepts:
  • true
  • false
Default: "false"
frontend_volume_button
(Boolean) (Optional) Frontend volume button toggle. Accepts:
  • true
  • false
Default: "false"
frontend_position
(String) (Optional) Specify the position of the front-end buttons if enabled. Accepts:
  • bottom-right
  • bottom-left
  • top-right
  • top-left
Default: "bottom-right"
enable_loader
(Boolean) (Optional) Toggle for a CSS loader.
  • true
  • false
Default: "false"

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 Pro metabox under the content editor
  3. Fill out the required fields and optional fields as desired
  4. Save the page/post

Using Visual Composer

Visual Composer is a great tool to create website elements without much coding experience. Video Background Pro integrates seamlessly with it.

  1. Ensure Visual Composer is installed
  2. Navigate to the post/page you would like the video background to appear on
  3. Ensure you are on the Visual Composer Backend Editor
  4. Create a row by selecting the plus icon, then selecting the Row item
  5.  Select the pencil icon in the top-right hand corner of the row to bring up the settings
  6. Click the Video Background tab, and fill in the fields as necessary.
  7. Save changes
Tip: Don’t forget to add content to your row!

Using SiteOrigin Page Builder

  1. Ensure SiteOrigin Page Builder is installed
  2. Navigate to the post/page you would like the video background to appear on
  3. click the Page Builder tab
  4. Add a Row by selecting the Add Row button
  5. You will be prompted to select the amount of columns you want in your row. Select the correct amount and click the insert button
  6. Edit the row by hovering over the wrench icon in the top-right hand corner of the row and selecting Edit Row
  7. Click the Video Background tab, and fill in the fields as necessary.
  8. Save changes
Tip: Don’t forget to add content to your row!

Add Custom Post Types to Metabox

To add the Video Background Pro 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.

Metabox Priority Filter

If you would like to change the position of the Video Background Pro metabox, you can achieve this through a filter. Add the function below to your functions.php file. In the $priority variable, define the priority.

Still Need Help?

If you couldn’t find your answer above, please open a ticket.