Youtube video background element

Use the Youtube video background element to add a Youtube video as a background to your layout.

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:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. 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:

1. Double click (or click ... and Edit) on the Youtube video background element to open its settings
2. Click on the Styles tab
3. Click on the Properties menu
4. Click on Layout
5. Click on Width and Height to add these properties to your Style form
6. 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
7. 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.

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.

For more information on Match heights, see Match the heights of elements.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.