YouTube Styling

The YouTube element enables you to embed a video in your web project to increase user engagement. The YouTube can be embedded by pointing to its URL address or by pulling it from Salesforce.

You can configure different styling options for this element, such as adjusting its position, size, and alignment. This element can be edited on the Project Style Level and Element Style Level.

#	Option	Function
1	Position	You can use this option to change the YouTube element’s location in the content area on the x and y-axis (left/right/top/bottom). Position also allows you to make the YouTube video float over its parent container or over the entire page. “Float over Parent” allows you to set the location of the YouTube element within the box containing it, e.g. container or strip. “Float over Page” allows a user to configure the location of the YouTube video inside of the entire page (and have it stay in the same location even when the user is scrolling in it).
2	Size	This option allows you to change the width and height of the YouTube video. Please notice that the YouTube player maintains the same proportion when its size is changed so that the video does not get distorted. However, if the width specified, for example, is smaller than the calculated ratio, it will not contort the video but only display part of it.
3	Alignment	This option allows you to set the YouTube video’s vertical (top/middle/bottom) or horizontal position (left/center/right) in relation to its parent container (which can be a container/column/strip). It also allows you to set the position of a few elements in relation to each other.
4	Border	The border option refers to the outer contour of the YouTube video’s container. It allows you to make the border visible or invisible, and change the width, color, corner radius, and more.
5	Shadow	Use the Shadow option to add single or multiple shadow layers to the outer contour of the YouTube element’s container.
6	User CSS	Cascading Style Sheets (CSS) allow a user to apply styles on the YouTube element with CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article.