--- title: "Youtube video background element" date: "2017-11-12T10:12:17+00:00" summary: "Add a captivating YouTube video background to your layout with ease. Customize playback, quality, and overlay options for a stunning visual experience that enhances your content and engages visitors." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/youtube-video-background-element" id: "08e9e245-b4fb-4b7c-8a4c-b554f439ddc6" --- Table of contents will be added 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](/drupal-starter-kits/add-ons/site-studio/video-background-element "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. ![98e7ef9e-youtube-video-background.png](https://acquia.widen.net/content/65bbc961-ae73-473c-913b-013f31d0e769/web/98e7ef9e-youtube-video-background.png) 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](/drupal-starter-kits/add-ons/site-studio/height-properties "Height properties") and [Width properties](/drupal-starter-kits/add-ons/site-studio/width-properties "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. 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. For more information on Match heights, see [Match the heights of elements.](/drupal-starter-kits/add-ons/site-studio/match-heights-elements "Match the heights of elements") Comments -------- * **Add comments -** Add comments to the Element.  For more information, see [Adding comments to an element](/drupal-starter-kits/add-ons/site-studio/adding-comments-element "Adding comments to an element").