---
title: "UIKit video background component"
date: "2020-11-18T16:07:40+00:00"
summary: "Enhance your website with UIKit's video background component. Learn how to easily add dynamic video backgrounds, set fallback images, and customize padding for a polished, professional look."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/uikit-video-background-component"
id: "95d333b4-abd5-4e62-8b58-6573311980f5"
---

The Video background component is for adding a container with a video background.

**Key information about this component:** 

Layout canvas elements
----------------------

*   **Container -** The outer container is required to add optionally add a margin below the component.
*   **Video background -** Provides a video as a container. This has **position:relative** and **z-index:-1** applied to it. This is required to ensure content placed within the component drop zone displays on top of the video.
*   **Container-wrapper -** Allows for padding to be applied around the content.

Component form fields
---------------------

*   **Video URL -** This requires a URL of a supported video file. For best results, an .mp4. 
*   **Image -** A fallback image should be provided for when the video cannot be loaded.
*   **Padding -** Allows the content author to apply padding around the components placed within the drop zone.
*   **Add space below -** Allows the content author to add a margin below the container to separate it from components that might be placed below it.