# Video hero Add the **Video hero** section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files. {% hint style="warning" %} **Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template. {% endhint %} ## Set up section *** In the editor side panel, click **(+) Add section** and select **Video hero**. Click and hold the drag handles **`⋮⋮`** to re-order sections. ### Section styles Sections include general styles. Click the section to find options for **spacing**, and **animations**.


Section spacing	#section-padding
Section animations	#section-animations

## Set up autoplay video *** In the section settings, upload a .mp4 or .mov for a background video that autoplays (without sound). You can upload an alternate **mobile video**, set a **focal point**, and customize the **overlay colors** to make your video look great on all devices.


Using color overlays	Learn how to change overlay colors and use gradients.	#image-overlays	overlay-solid.png

{% tabs %} {% tab title="Video requirements" %} For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	< 20 seconds (Recommended)
Video size	< 10MB (Recommended)

{% endtab %} {% endtabs %} `Click Video hero section to find settings`

Setting	Description
Shopify video	Select or upload a video that autoplays (without sound).
Focal point	For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.
Background link	Select a page or URL to make the entire video a clickable link.

### Change width and height *** You can adjust the height to make the video tall or compact. Choose to display the video with a **Fixed** or **Relative** height. * **Fixed** heights maintain the same pixel height on all screens. * **Relative** heights adapt the image height as a percentage of the screen height. `Click Video hero section to find settings`

Setting	Description	Options
Enable full width	Choose to span the image across the whole window or screen, removing the margins on either side.
Banner height	Set the banner height to either Adapt to video (use your video’s height) or select a Custom height.
Desktop height	Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 250 - 650px Relative height 50 - 100%
Custom mobile height	Change the maximum height of the video on mobile. Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 150 - 650px Relative height 50 - 100%

## Add content blocks *** Use blocks to customize the content area of the section. Click **(+) Add block** to add text, buttons, and other media. Use the drag handles **`⋮⋮`** to re-order blocks, and change the layout in the section settings.


Accent	Add small label heading.	#accent
Heading	Add title heading.	#heading
Text	Add multiple lines of rich text.	#text
Button	Add buttons with custom styles.	#button
Image	Add images with custom sizes.	#image
Text list with icons	Add column text with icons.	#text-list-with-icons
Video player	Add video that plays in a popup viewer.	#video-player
Divider	Add border between blocks.	#divider
Spacer	Add space between blocks.	#spacer

### Change content layout *** In the section settings, change the **width** and **layout** of the content blocks area. `Click Video hero section to find settings`

Setting	Description
Content width	Set the maximum width of the section: between 400 and 1000 px.
Text position	Change the position of the content blocks within the section for desktop screens.
Mobile text position	Change the position of the content blocks within the section for mobile screens.

### Show text box *** Enable the **text box** to display the content blocks inside a container. Change the text and background **colors**, and choose to show **shadows** or **borders** around the text box.

`Click Image hero section to find settings`

Setting	Description
Show text box	Display all content blocks within a container.
Text box style	Display boxes with a Soft drop shadow, Solid drop shadow, or Borders with different thicknesses.
Color scheme	Change the color scheme applied to the text box. Use the Default color scheme from your theme settings or select a variant scheme based on the default: either Inverse, Soft, Accent, or Sale. You can also select a custom color scheme. Learn more.
Override with custom colors	Use custom colors for this section to override the color scheme.
Text color	Select a custom color for text within the text box.
Background color	Select a custom color for the background of text box.

*** > **Related links** > > [Image hero](https://help.fluorescent.co/cornerstone/pages/theme-sections/image-hero) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.fluorescent.co/cornerstone/pages/theme-sections/video-hero.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.