> For the complete documentation index, see [llms.txt](https://meowcart.gitbook.io/lilyth-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://meowcart.gitbook.io/lilyth-theme/sections/video.md).

# Video

Displays a large banner consists a video in background and a text box with buttons.

The **Video** section contains the following default blocks:

* [Heading](#heading-block)
* [Text](#text-block)
* [Caption](#caption-block)
* [Buttons](#buttons-block)

## Section settings

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make image full width</td><td>Extend the section to be the width of the browser window.</td></tr><tr><td>Color schema</td><td>A set of colors that you can apply to this section. <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme">Learn more.</a></td></tr><tr><td>Separator line</td><td><p>Display a line to visually separate this section from the other sections:</p><ul><li><strong>None</strong></li><li><strong>Top</strong></li><li><strong>Bottom</strong></li><li><strong>Top and bottom</strong></li></ul></td></tr><tr><td>Video height</td><td><p>Determine the height of the video:</p><ul><li><strong>Adapt to cover image</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td>Cover image</td><td>Upload a image to display as cover image on desktop.</td></tr><tr><td>Mobile cover image</td><td>Upload a image to display as cover image on mobile.</td></tr><tr><td>URL</td><td>Use a YouTube or Vimeo URL</td></tr><tr><td>Video alt text</td><td>Describe the video for customers using screen readers. <a href="https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video">Learn more</a></td></tr><tr><td>Enable autoplay</td><td>Set the video to play automatically.</td></tr><tr><td>Show container on desktop</td><td>Adds a container for the text parts with a background for more readability.</td></tr><tr><td>Desktop content position</td><td><p>Determine position of the content on desktop:</p><ul><li><strong>Top left</strong></li><li><strong>Top center</strong></li><li><strong>Top right</strong></li><li><strong>Middle left</strong></li><li><strong>Midle center</strong></li><li><strong>Middle right</strong></li><li><strong>Bottom left</strong></li><li><strong>Bottom center</strong></li><li><strong>Bottom right</strong></li></ul><p>(<em>Position is automatically optimized for mobile</em>)</p></td></tr><tr><td>Desktop content alignment</td><td><p>Determine the content alignment on desktop:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Mobile content alignment</td><td><p>Determine the content alignment on mobile:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

## Section padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

## Block settings

### Heading block

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add a text to display as a heading.</td></tr><tr><td>Heading size</td><td><p>Changes the size of the heading:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Text block

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Add a text to display as custom content.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Caption block

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Caption</td><td>Add a text to display as a caption.</td></tr><tr><td>Caption size</td><td><p>Changes the size of the caption:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Buttons block

#### First button settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Button label</td><td>Add a text to display as button label. Leave the label blank to hide the button.</td></tr><tr><td>Button link</td><td>Set the link of the button, for example the customer service page.</td></tr><tr><td>Button style</td><td><p>Change the style of the button:</p><ul><li><strong>Solid button</strong></li><li><strong>Outline button</strong></li></ul></td></tr></tbody></table>

#### Second button settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Button label</td><td>Add a text to display as button label. Leave the label blank to hide the button.</td></tr><tr><td>Button link</td><td>Set the link of the button, for example the customer service page.</td></tr><tr><td>Button style</td><td><p>Change the style of the button:</p><ul><li><strong>Solid button</strong></li><li><strong>Outline button</strong></li></ul></td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>