How to use PlusPack video backgrounds [PlusPack]
Please note: You must be using OptimizePress version 2.5.7 or above for PlusPack features to function correctly.
This video shows how to use the OptimizePress PlusPack Video Backgrounds element.
Using the Video Background settings, you will now be able to insert full videos that will animate on your page. These can be used used for either full screen background or specific row backgrounds. Ideal for enticing your visitors and keeping them engaged.
- To get started, hover over your row and click on the ' Small Pencil' icon to launch the row settings window. Scrolling down, you will now see a new section dedicated to Background Video.
- Your first option will be to select a ' Video Type'. You will have the choice to choose either 'Youtube' or a custom 'URL', which is ideal if you prefer to select one of your self-hosted videos using either Amazon S3 or other hosted service.
Please Note: for the custom URL file type, you will only be able to upload videos containing the following file extensions: .mp4, .webm or .ogv
- In our example, we will be choosing ' Youtube' as our video type.
- You will first need to head over to Youtube and copy the URL of the video you would like to use by clicking on the ' Share' link and copying the URL below.
- Once you've pasted in the Youtube link in the required fields. You will then be given the option to set the aspect ratio of the video. By default, Youtube will set the aspect ratio to 560px(width) x 315px(height)
- If you would like to change the aspect ratio, we recommend using the recommended Youtube dimensions by referring to the share area in Youtube and looking at the aspect ratio selections.
- Once you've set your video and the dimensions you require, you will now have a list of other options to further customise your videos:
Video Overlay Color - Select a colour you would like to use to overlay your video. This is ideal for providing a tint or colourful gloss over your videos.
Video Overlay Opacity (Percentage) - Select how prominent you would like the overlay to appear over your video. The higher the percentage, the stronger the clarity.
Video Overlay Image - Select an image to display on top of your video. Ideal for creating reflection effects.
Video Overlay Image Position (Tile, Cover, Stretch, Center) - Select how you would like the overlay image to be positioned.
Alternative image for mobile devices - Select an image to display exclusively on mobile devices.
Mute Video - Choose to either keep or mute the audio contained in the video. Our testing shows that in most niche scenarios muted audio is more effective.
Full Page Video - Select whether you would like the video Background to occupy the entire page and not just the row.
- Once everything is set, click the ' Update' button to add the Video Background element to your page. To confirm that the LiveEditor has added the element, look for the 'Play' icon in the top left corner of the row.
- Save the changes and preview your page. Your Background Animation should now appear live on your page.
We recommend playing with the different settings to see how it affects your videos and to see what's possible.
Here's a video background using a Video Overlay Color of blue with a Video Overlay Opacity of 50%:
PLEASE NOTE: Video backgrounds can be a very engaging feature of a website. It is important to remember that an effective video background file should be formatted and compessed correctly for playing online. Huge HD video files might look great playing on your display but may not stream nicely for visitors to your site.