This article will show you how to use the Video Element within the OptimizePress Builder.
How to Add the Video Element to Your Page
First, you’ll open your page in the Optimize Builder and look for the Video element from the (+) elements sidebar area. You can also use the element search to locate the element.
Now you’ll just drag the Video element to the side where you would want to insert it. You’ll then see the Video element toolbar where you can add your video and customize the player settings.
Adding Your Video to the Video Player Element
To add your video simply click the Video Settings icon. The video player element has several options. You can use video URLs from Vimeo, Youtube, Wistia, or you may use an externally hosted video, or upload one if your hosting is suitable for video hosting.
Select the Video Source from the dropdown and then enter your embed code or video link – or upload a video.
Video Advanced Settings
The Video Advanced Settings will let you make some changes to how the video. These options may change depending on the video hosting service you use. In the below screenshot, we were using Vimeo as the video source, which has the most options available.
NOTE: The Video Advanced features are not available with the Custom Embed Code option, and are limited on some other video options.
How to Make the Video Element Sticky When Scrolling
The Sticky Video feature will make the video stick as the visitor is scrolling down the page. You can see the option for this in the video settings “Sticky Video” tab. Simply turn that on, and also turn on the Preview if you would like to see the design options for the video when it is in Sticky mode. You can see there are several options to choose from.
Magic Overlay – Automatically Play Video While Muted
Added in February 2023, Our Magic Video Overlay feature will allow you to autoplay a video upon page load while also muting the video which is more compatible with browsers and devices which may limit the normal video autoplay features.
How this works is when someone visits your page, they’ll see the video playing, but it will be muted. If they then click to play the video, it will start playing from the beginning of the video.
To enable the Magic Overlay, click the “Magic Overlay” tab in the video settings and activate it.
You can also choose to replace the the overlayed image for the Video Magic Overlay as well.
To learn more about the Magic Video Overlay, you may visit our dedicated guide for that feature here: https://docs.optimizepress.com/article/magic-video-overlay/
Overlay an Image With Play Button (On top of video)
This is optional, but can be helpful if you want to keep some design consistency by adding image placeholders for your videos. You can set up an Image Overlay to your Video element. Click the “Image Options” icon for this.
If you do not see this icon, then you need to turn off the Magic Overlay feature first as it’s not possible to have two overlays on top of one video.
To replace or remove the image, just click the option that corresponds with what you want to do.
You can also choose an icon and change the icon size, color, and shadow settings in case you would like to tweak from the default setting.
Other Video Element Settings
Similar to other elements, we also have several other settings.
You can set up Borders & Shadows for the video.
You can align the video (when the column is wider than the video)
Use the cross-arrows icon to reposition the element to another spot on your page.
You can clone the element which can save you time from configuring each new video element on your page.
You can delete the element if you want, which is a nice option if you have a trigger happy finger on your mouse (or if your dog/cat lays on your mouse).
You can also adjust the vertical spacing for the Video Player element by clicking the gear icon.
You can also access the Video Player’s other advanced options by clicking the blue Advanced Options button, which will open the left sidebar where you can adjust Positioning, Responsive, Animation/Delay, and other options.
