Use the Youtube video element to add Youtube videos 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 element instead of the Youtube embed element.
Locating the Youtube video embed element
To find the Youtube video embed 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 embed element.
The Youtube video embed element includes the following fields:
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.
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
Show related videos - Show related videos when the video finishes. Related videos are controlled by Youtube
Show controls - Show the video controls
Show full screen button - Show the Full screen button
Show video title - Show the title at the top of the video
Show annotations - Show video annotations (if available in the video)
Aspect ratio
Aspect ratio - Set the video player to 16:9 or 4:3 depending on the format of the video being shown
Setting the player size
You can control the Youtube video player size using styles. To set a specific size:
Double click (or click ... and Edit) on the Youtube video element to open its settings
Click on the Styles tab
Click on the Properties
Click on Layout
Click on Width and Height to add these properties to your Style form
Enter a width and height in the fields
Click Apply
Custom style
Apply a Layout custom style to the Youtube video embed. The Custom style will effect the player 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.
Use the Youtube video element to add Youtube videos 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 element instead of the Youtube embed element.
Locating the Youtube video embed element
To find the Youtube video embed 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 embed element.
The Youtube video embed element includes the following fields:
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.
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
Show related videos - Show related videos when the video finishes. Related videos are controlled by Youtube
Show controls - Show the video controls
Show full screen button - Show the Full screen button
Show video title - Show the title at the top of the video
Show annotations - Show video annotations (if available in the video)
Aspect ratio
Aspect ratio - Set the video player to 16:9 or 4:3 depending on the format of the video being shown
Setting the player size
You can control the Youtube video player size using styles. To set a specific size:
Double click (or click ... and Edit) on the Youtube video element to open its settings
Click on the Styles tab
Click on the Properties
Click on Layout
Click on Width and Height to add these properties to your Style form
Enter a width and height in the fields
Click Apply
Custom style
Apply a Layout custom style to the Youtube video embed. The Custom style will effect the player 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.
Site Studio