Video Background Pro


  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.

Activating The Plugin

Video Background Pro must be activated in order to use it. Once you purchase the plugin, you will be granted a license key, and a license key email (the email you made the purchase with). These credentials will authenticate you once you purchase and install the plugin, and will allow for updates through the native WordPress plugin updater.

Troubles Activating the Plugin?

If you run into issues activating the plugin, please try the following steps:

  1. De-activate Video Background Pro
  2. Navigate to Your API Keys and remove any keys for the domain you are trying to activate.
  3. Re-activate Video Background Pro
  4. Enter your license key and license email found on the API Keys page

If you experience further issues with activation, please open a ticket.

“Server preventing outgoing requests” Error

If you are receiving an error regarding “outgoing requests” this is likely due to a plugin conflict. You can determine which plugin is blocking outgoing requests by disabling plugins one at a time, while trying to authenticate Video Background Pro after each plugin deactivation.

Updating The Plugin

Updating to Version 3.0.0 and Above

Video Background Pro 3.0.0 is a BIG update in terms of the backend. The Visual Composer and SiteOrigin integration classes were completely rewritten to offer a more reliable experience across themes and plugins. However, with this update, we had to use a different data model, as the last model was not reliable and caused issues. With this being said, upgrading to Video Background Pro 3.0.0 will require you to re-enter all of your Video Background Pro information for video backgrounds you’ve set up through Visual Composer or SiteOrigin.

Additionally, due to Chrome’s new autoplay policies, the browser (and likely others will follow) no longer allow video autoplay with sound enabled since this could possibly irritate users. As a result of these changes, Video Background Pro has removed the functionality that allows you to enable sound. However, the frontend buttons are still available for your users to toggle sound and pause/play controls 🙂

This change will make video backgrounds all around more reliable on desktop and mobile devices.

Additionally, there are now filters to disable the SiteOrigin Page Builder integration and the Visual Composer Page Builder Integration. Finally, there is a filter to switch back to the old data model for the integrations, however, this is not recommended as it has become quite unreliable with 3rd party themes and plugins.

Updating Version 2.1.0 and Above

Updating the plugin is easy. Since you verify your API credentials, these credentials are then used to authorize any updates. Updates come in to WordPress as any native update would from the WordPress repo, allowing you to effortlessly stay up to date!

Updating Version 2.0.0 and Below

Since Video Background Pro version 2.0.0 and below did not have over-the-air (OTA) updates, the plugin is updated by uploading the new version of the plugin to the FTP server, and overwriting the old files.

For more information regarding manually updating a plugin, please take a look at WPBeginner’s Article.

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


(String) (Required) The container value. This is where your video background will go. Accepts:
  • Class
  • ID
  • Element
Default: ""
(String) (Optional) The type of video background you would like. Accepts:
  • self-host
  • youtube
Default: "self-host"
(String) (Optional) The .mp4 file link. Only necessary if you are using a self-hosted video background.
Default: "#"
(String) (Optional) The .webm file link. Only necessary if you are using a self-hosted video background.
Default: "#"
(String) (Optional) The YouTube URL. Only necessary if you are using a Youtube video background.
Default: "#"
(String) (Optional) The YouTube video background start second if using a YouTube video background.
Default: "0"
(String) (Optional) The YouTube video background end second if using a YouTube video background.
Default: "null"
(String) (Optional) The fallback image for mobile devices and browsers that can’t display video backgrounds.
Default: "#"
(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"
(Boolean) (Optional) The muted toggle. Accepts:
  • true
  • false
Default: "true"
(Boolean) (Optional) The loop toggle. Accepts:
  • true
  • false
Default: "true"
(Boolean) (Optional) The overlay toggle. Accepts:
  • true
  • false
Default: "false"
(String) (Optional) Specify the color of your overlay as a hex color.
Default: "#000"
(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"
(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: "#"
(Boolean) (Optional) Frontend play button toggle. Accepts:
  • true
  • false
Default: "false"
(Boolean) (Optional) Frontend volume button toggle. Accepts:
  • true
  • false
Default: "false"
(String) (Optional) Specify the position of the front-end buttons if enabled. Accepts:
  • bottom-right
  • bottom-left
  • top-right
  • top-left
Default: "bottom-right"
(Boolean) (Optional) Toggle for a CSS loader.
  • true
  • false
Default: "false"
(Boolean) (Optional) Determine if the video background should play on mobile or not if supported. Accepts:
  • true
  • false
Default: "true"

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

Playback with Audio

As a result of Chrome’s new autoplay policies, starting in Video Background Pro 3.0.0 the option to enable audio on page load will be removed. Chrome’s new autoplay policies no not all videos to autoplay with sound unless under very certain circumstances, which likely would not be met for the average user.

With this being said, Video Background Pro still offers front end volume and play/pause buttons so if your users desire to hear the audio they will be able to. 🙂

Mobile Video Background Playback

In order for video backgrounds to play on mobile devices, a few things are required.

Firstly, make sure you have both .mp4 and .webm video files present, or if you are using the YouTube integration, make sure the link to the YouTube video is correct. Next, you’ll have to make sure that the video background’s “Play the audio?” feature is disabled. Video backgrounds can only be played on mobile devices if the video background is muted. This is a policy put in place by Apple and Google, and is not a decision by Video Background Pro.

Finally, your device must fall within the two categories below, in order for the video background to play on mobile:

  • IOS devices running IOS 10 or greater using the Safari browser
  • Android devices using any variation of Chromium on version 52 or greater

If the above conditions are not met, the video background will simply display the fallback image as usual. Additionally, if you’d like Video Background Pro to not play on mobile by defualt, you can take a look at the Default Mobile Video Background Playback Filter.


Version 2.3.0 of Video Background Pro brings methods. These methods will allow you to execute certain actions on your video background. Please take a look at the 5 methods below.

Tip: Make sure to replace #container with your own container!

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.

Play Video Background on Mobile Default Behavior

If you would like to change the default behavior of video backgrounds on mobile, you can do so with the following filter. Please note that the value is a string, and not a boolean value.

Add Dependencies for Video Background Pro

A theme or plugin may be conflicting with Video Background Pro. In that case, you could require Video Background Pro to enqueue after those plugin/theme scripts to avoid any conflicts using the filter below:

Disable Visual Composer Integration

If you need to disable the Visual Composer integration, you could disable it using the following filter:

Disable SiteOrigin Page Builder Integration

If you need to disable the SiteOrigin Page Builder integration, you could do so using this filter:

Use Old Integrations Data Model

If you need to go back to the old integrations data model you can do so with the following filter. PLEASE NOTE: this is not recommended as the old data model is very unreliable with 3rd party themes and plugins.

Still Need Help?

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