Finding Your Container Element

The “container” element is the most integral part to make Video Background function properly. The container field specifies where your video background will go on your page.
Note: If you are using Visual Composer or Page Builder by SiteOrigin, this field is not necessary.

To find your container element, navigate to the page that you wish to set the video background on.

Getting Started: Finding Your Container - Step 1

Next, we are going to open the Developer Tools. The Developer Tools can be found in numerous browsers, but your best bet is to use either Google Chrome or Safari. Open the developer tools by right clicking the webpage, and select “Inspect” or “Inspect Element”.

Getting Started: Finding Your Container - Step 2

Once the Developer Tools are open, click the pointer icon in the top-left hand corner of the popup panel.
Tip: You can skip this step if you are using Safari.

Getting Started: Finding Your Container - Step 3

Now, simply hover over the section where you would like the video background to appear. Once the mouse is hovering over the section, click the mouse.

Getting Started: Finding Your Container - Step 4

Once the mouse has been clicked, you’ll notice your “container” element has been selected in the HTML document tree. In most cases you will either have an ID or a class, in this case, we have both! This means you can use either the “id” or the “class” for the container. Most importantly, IDs are specified with a “#” in front of the selector and classes are specified with a “.” in front of the selector.
Example: #masthead or .site-header

Getting Started: Finding Your Container - Step 5

Finally, simply pop back into your WordPress admin and navigate to the post or page you would like to display the video background on. Once you are there, fill in the container field with your “id” or “class” and publish/update the page or post!

Getting Started: Finding Your Container - Step 6

Getting Started: Finding Your Container - Step 7