Add Dynamic Video Backgrounds to Page Builder

Long on our to-do list, we're excited to let you know we've introduced the Video Background Addon for SiteOrigin Premium. Transform your website’s look with the SiteOrigin Video Background Addon. Introduce dynamic video backgrounds to any Page Builder row, column, or widget, adding an energetic touch to your site. With support for various video formats like mp4, m4v, mov, wmv, avi, mpg, ogv, and webm, flexibility is at your fingertips. The addon goes further by offering semi-transparent overlays or patterns, striking the right balance between the liveliness of videos and the clarity of your text. Its seamless integration with the Page Builder ensures an effortless experience in creating web pages that are both visually captivating and user-friendly.

View the Video Background Addon demo.

Background videos can be added to Page Builder rows, columns, or widgets.

The following settings will be available when adding a video in the Row, Column, or Widget Design settings section. Only the Background Video setting will initially be visible. Once a background video has been added, the secondary settings will be displayed.

Background Video
Click Select Video to add a video from your Media Library or upload a video. Use the External URL field if you'd like to add an externally hosted background video.

Background Video Opacity
Adjust the background video opacity to reveal either the page background color or the row background color. The row background color can be set using the Background Color setting above the Background Video setting.

Loop Video
Disable to play the background video once.

Background Video Display
Choose between Full (full size) or Cover to cover the available space.

Add a Background Video to your row, column, or widget using the Background Video > Select Video setting or the External URL field.

Row Background Videos

To add a background video to a Page Builder row, insert a new row or editing an existing row by clicking the wrench icon on the right.

Click the wrench icon on the right to edit an existing Page Builder row.

Next, open the Design section and click Select Video under the Background Video label or use the External Video field to insert a video URL.

Column Background Videos

To add a background video to a Page Builder column, insert a new row or editing an existing row by clicking the wrench icon on the right.

• Use the Column Count field at the top left of the row edit modal to insert your column count, we've used 2 in our example below.
• Click on the column you'd like to edit and a new Column "X" Styles panel will appear under Row Styles on the right where "X" represents the number of the column you've selected. In our screenshot below, we've selected column 1.
• Open the Design settings section and add Background Color, Background Video and adjust the Background Video Opacity as required.

Select a column, use the Column Styles field on the right to add a video in the Design section.

Widget Background Videos

To a video to a widget, edit a widget by clicking on the widget or hovering over the widget and clicking the Edit link. Under Widget Styles on the right, open the Design section and click Select Video under the Background Video label or use the External Video field to insert a video URL.

Edit a widget, open Widget Styles > Design on the right and click Select Video under the Background Video label.

Wrap Up

Thanks for reading, we're excited to see the layouts you create with the Video Background Addon. Please let us know if we can assist in any way. If you aren't using SiteOrigin Premium and are interested in what else is on offer, head on over to the SiteOrigin Premium product page.