Use the Youtube video background element to add a Youtube video as a background to your layout.
Important
Site Studio uses third-party plugins to connect to Youtube's API. Youtube often update their API, but third parties may not always update their plugins. We make every effort to make sure these are up to date. We suggest using the video background element instead of the Youtube video background element.
Locating the Youtube video background element
To find the Youtube video background element:
Navigate to a component or a template with the Layout canvas
Click the + button on the Layout canvas
Within the Elements tab, look for the Youtube video background element.
The Youtube video background element includes the following fields:
Why choose video background over video embed?
The Youtube video background element is a container. You can add child elements into it and they will display over the top of the video. The Youtube video embed is a content element and cannot have child elements.
Setting the video background size
The Youtube video background does not have any size by default. You must set the size of the element using styles. To set the size of the element:
Double click (or click ... and Edit) on the Youtube video background element to open its settings
Click on the Styles tab
Click on the Properties menu
Click on Layout
Click on Width and Height to add these properties to your Style form
Enter a width and height in the fields. For more information about accepted units and values for these fields see Height properties and Width properties
Click Apply
Video
Youtube URL - Add the URL of the video. The URL of a Youtube video can be copied from the browser address bar or the Share link when viewing a Youtube video
Preview - Shows a preview of the Youtube video being used. The preview does not show the settings applied in Video controls.
Mobile fallback image
Most mobile and touch devices will not show videos as a background to an element. For these devices, a fallback image should be uploaded.
Image - Select a fallback image
Position
The Youtube video background will scale to fill both the height and width of its container.
Scale from - Set the starting point at which the video background will scale from.
Overlay and opacity
Overlay - Apply an pattern overlay to the video. These are used to give the appearance of a sharper video
Opacity - Set the opacity of the video. 1.0 is full opacity and 0.1 is 10% opacity
Video controls
The video controls are provided by Youtube and can be set to active or inactive using the video control toggles.
Autoplay - Set the video to play as soon as it's loaded
Loop video - Set the video to start again when it's finished
Pause when out of view - Set the video to pause when it's not within the browser viewport
Audio controls
Mute audio - Mute the audio
Start stop frames
Start frame - Set the frame for the video to start at
Stop frame - Set the frame for the video to stop at
Video quality
You can set the quality of the video playback. The higher the quality, the faster the internet connection required for smooth playback, and the higher the quality required from the original video uploaded to Youtube.
Important
Use Default and the video quality will automatically match the user's available bandwidth availability.
Quality - Set the video quality. These settings are provided by Youtube
Default (Recommended) - YouTube will select the most appropriate playback quality.
Small - Video height is 240px
Medium - Video height is 360px
Large - Video height is 480px
HD 720p - Video height is 720px
HD 1080p - Video height is 1080px
Hi-res - Video height can be above 1080px
Custom style
Layout style - Apply a Layout custom style to the Video background container.
Match heights
Match heights - Match the height of the element using:
None - Removes the match heights at the specific breakpoint
Class - Match the height of the element with another element with the same class name
Children with class - Match the heights of any child elements with the same class name
Child element - Match the heights of all child elements of the same type.
Use the Youtube video background element to add a Youtube video as a background to your layout.
Important
Site Studio uses third-party plugins to connect to Youtube's API. Youtube often update their API, but third parties may not always update their plugins. We make every effort to make sure these are up to date. We suggest using the video background element instead of the Youtube video background element.
Locating the Youtube video background element
To find the Youtube video background element:
Navigate to a component or a template with the Layout canvas
Click the + button on the Layout canvas
Within the Elements tab, look for the Youtube video background element.
The Youtube video background element includes the following fields:
Why choose video background over video embed?
The Youtube video background element is a container. You can add child elements into it and they will display over the top of the video. The Youtube video embed is a content element and cannot have child elements.
Setting the video background size
The Youtube video background does not have any size by default. You must set the size of the element using styles. To set the size of the element:
Double click (or click ... and Edit) on the Youtube video background element to open its settings
Click on the Styles tab
Click on the Properties menu
Click on Layout
Click on Width and Height to add these properties to your Style form
Enter a width and height in the fields. For more information about accepted units and values for these fields see Height properties and Width properties
Click Apply
Video
Youtube URL - Add the URL of the video. The URL of a Youtube video can be copied from the browser address bar or the Share link when viewing a Youtube video
Preview - Shows a preview of the Youtube video being used. The preview does not show the settings applied in Video controls.
Mobile fallback image
Most mobile and touch devices will not show videos as a background to an element. For these devices, a fallback image should be uploaded.
Image - Select a fallback image
Position
The Youtube video background will scale to fill both the height and width of its container.
Scale from - Set the starting point at which the video background will scale from.
Overlay and opacity
Overlay - Apply an pattern overlay to the video. These are used to give the appearance of a sharper video
Opacity - Set the opacity of the video. 1.0 is full opacity and 0.1 is 10% opacity
Video controls
The video controls are provided by Youtube and can be set to active or inactive using the video control toggles.
Autoplay - Set the video to play as soon as it's loaded
Loop video - Set the video to start again when it's finished
Pause when out of view - Set the video to pause when it's not within the browser viewport
Audio controls
Mute audio - Mute the audio
Start stop frames
Start frame - Set the frame for the video to start at
Stop frame - Set the frame for the video to stop at
Video quality
You can set the quality of the video playback. The higher the quality, the faster the internet connection required for smooth playback, and the higher the quality required from the original video uploaded to Youtube.
Important
Use Default and the video quality will automatically match the user's available bandwidth availability.
Quality - Set the video quality. These settings are provided by Youtube
Default (Recommended) - YouTube will select the most appropriate playback quality.
Small - Video height is 240px
Medium - Video height is 360px
Large - Video height is 480px
HD 720p - Video height is 720px
HD 1080p - Video height is 1080px
Hi-res - Video height can be above 1080px
Custom style
Layout style - Apply a Layout custom style to the Video background container.
Match heights
Match heights - Match the height of the element using:
None - Removes the match heights at the specific breakpoint
Class - Match the height of the element with another element with the same class name
Children with class - Match the heights of any child elements with the same class name
Child element - Match the heights of all child elements of the same type.
Site Studio