Adding Video Backgrounds to Rows in Brizy with Self Hosted Video

So, I recently went all in on Brizy as my wordpress editing platform for 2021+. Time will tell whether it will be a better choice than investing in the Gutenburg ecosystem, or if I should have gone Oxygen, or Elementor… but regardless. There’s a LOT I really like about Brizy so far. Having come from Divi, Brizy has a FAR cleaner and clearer interface, and I’m pretty happy with the range of options on offer. Brizy offers the ability to add video backgrounds to your rows, but this option is limited to choosing a youtube or vimeo video URL, and also there are no nice options for video backgrounds on supported mobile devices. Suffice to say, I was investigating an alternative option, and this is what I came up with.

What you’ll need:

• Brizy plugin installed
• Simple Custom CSS and JS plugin installed (could also be done with Shortcoder)
• VidBG (download the release 2.10)

Steps:

1. Extract the VidBG release 2.10 zip file.
2. In wordpress, go to “Custom CSS and JS” in the sidebar, and create a new custom CSS listing.
3. On the right side of the “Add CSS Code” page, in the options pane, make sure it is set to show in the header.
4. Paste the contents of the vidbg.css file into there.
5. Now, again go to “Custom CSS and JS” in the sidebar, and create a new custom JS listing.
6. On the right side of the “Add JS Code” page, in the options pane, make sure it is set to show in the footer.
7. Paste the contents of the vidbg.js file into there.
8. Now, below the contents of that script you pasted, you want to copy and paste the following code.

   • var instance = new vidbg(
     ".vidbg-box .brz-section__content",
     {
     mp4: "/wp-content/uploads/2021/08/my-video-here.mp4", // URL or relative path to MP4 video
     webm: "/wp-content/uploads/2021/08/my-video-here.webm", // URL or relative path to webm video
     poster: "/wp-content/uploads/2021/08/my-video-here.jpg", // URL or relative path to fallback image
     overlay: false, // Boolean to display the overlay or not
     overlayColor: "#000", // The overlay color as a HEX
     overlayAlpha: 0.3, // The overlay alpha. Think of this as the last integer in RGBA()
     },
     {
     // Attributes
     }
     );

9. Now, you’ll need to edit the lines in purple above with the correct URL for your self-hosted media (that you’ve already uploaded, hopefully).
10. You’ll also need to edit the blue section in the code above with the correct CSS selector for the section you want to show the video. A suggested tag is listed above.
11. Finally you will want to add a “vidbg-box” CSS class, to the section you want to have display the video.
    1. Go to your page
    2. Click the “edit” button in the top right corner of the desired row.
    3. Click the “gear” button.
    4. Click the “More Settings” button.
    5. Click the “Advanced” tab.
    6. Under CSS Class, add “vidbg-box” (without quotes).
    7. Save the page
12. Reload the page… you should see the video playback appear on your row!

For more information on configuring the playback and display options, please see the VidBG project documentation.

I hope this helps!