With the YouTube Background Video SmartBox you can add a YouTube Video in the background of your website. You can add the video over the full width or full height. This article explains how the feature works and what you need to do to have the right settings made. You can download the required .json file from this article (see below this article).
Note: this SmartBox works on desktop versions of the website. Mobile devices block autoplay - therefore this module is not recommended to be used for mobile.
How to install the SmartBox on your website:
Open the website.
Go to Settings -> Design -> SmartBoxes.
Click “Import” (see image).
Click “Choose File” and select the SmartBox_BG YouTube Video file (a .json file). Note: the required file can be downloaded from this article (see below).
Click “Open” and then click “Save and Close”.
Afterwards click “Save and Close” again.
How to insert the Background YouTube Video SmartBox on your website
Go to the website and click on the “+” symbol – please choose the exact spot where you’d like to place the video when you click the symbol. Select SmartBox -> BG YouTube Video from the menu. Afterwards, a menu opens up and you can input the customised settings.
Enter the link of the YouTube Video in the “Video Code” section (where the Youtube Video Background is shown). You should find the code after clicking ‘share’ in YouTube. You now need only to insert the code and delete the “https://www.youtube.com/watch?v=” part.
Full width vs full height
By default the settings of the background video are for full width. Make sure to add additional elements (for example text or breaks) in the SmartBox, to give it some height. Then, the video will appear in the background.
You can set the video to full height. To do so, open the SmartBox settings. Click the “Enable Fullheight” box (where the Fullheight Settings are). This way the video will be shown over the full page height. If your website has a top menu and the video is the first element after the header, you’ll need to make an adjustment: add a number in the field “Height Fix”. For example 53. The number equals the number of pixels for the header height.
Text alignment
You can add a text element in the SmartBox, to have it shown across the video. If you’d like the text to be vertically centred, open the SmartBox settings and click the box “Fullheight Vertical Center” (this can be found also in the Fullheight Settings section).
How to activate a mask
You can place a mask over the video, for instance to make the text more readable. To do this, go to the SmartBox settings. Click the “activate mask” box in the Gradient Mask section. Set the background colour for
your mask. The HEX and RGB numbers are used to select the colour. A is a value between 0 and 1 and defines the transparency of the mask. Usually a white transparent mask with text in contrasting colours gives the best results.
Version number
At the top, on the left side, right under the text Fullheight Settings, you’ll find the version number of the SmartBox. This version number is very useful when communicating with our support or our developers, as we might update the SmartBox options over time.