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

# Video With Media

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Video with Media** section allows you to showcase promotional videos with optional cover images to create an engaging visual experience for your customers. You can upload a self-hosted video or embed a YouTube or Vimeo video, customize playback behavior, and control the section layout.

This section is ideal for highlighting product launches, brand stories, promotional campaigns, or featured collections.

## How to add a Video with media section <a href="#how-to-add-a-product-bundle-section" id="how-to-add-a-product-bundle-section"></a>

{% hint style="success" %}
**Steps**

1. Open **Online Store → Themes → Customize**.
2. Navigate to the page containing the **Video with Media** section.
3. Select the **Video with Media** section.
4. In the **Media** settings, upload or select an **Image**.
5. Enter a promotional **Caption**.
6. Enter the main **Heading**.
7. Select the preferred **Heading Size**.
8. Choose a **Color Scheme** that matches your store branding.
9. Enter the **Button Label**.
10. Select the **Button Link** destination.
11. Click **Save** to apply your changes.
    {% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable Wide Layout</td><td>Enable this option to display the section across the full width of the screen, creating a more immersive visual experience.</td></tr><tr><td>Video</td><td><p><strong>Video</strong> </p><p>Upload a self-hosted video from your Shopify Files.</p><p><strong>Recommended Size:</strong> 1920 × 700 px</p><p></p><p>For visual guide show <a href="#video"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>URL</strong> </p><p>Add a YouTube or Vimeo video URL instead of uploading a video file.</p><p></p><p><strong>Cover image</strong> </p><p>Select an image displayed before the video starts playing. This is also used if autoplay is disabled or the video cannot load immediately.</p><p></p><p><strong>Recommended Size:</strong> 1920 × 700 px</p><p></p><p><strong>Video Height</strong> </p><p>Select the height of the video section.</p><p>Available options may vary depending on the theme configuration.</p><p></p><ul><li><strong>Fit screen —</strong> Expands the video to fill the available screen height, creating an immersive full-screen experience.</li><li><strong>Adapt</strong> — Automatically adjusts the video height based on the video's original aspect ratio.</li><li><strong>Small</strong> — Displays the video with a compact height, making it suitable for shorter promotional sections.</li><li><strong>Medium</strong> — Displays the video with a balanced height that works well for most store layouts.</li><li><strong>Large</strong> — Displays the video with increased height to create greater visual impact while remaining within the page layout.</li></ul><p></p><p><strong>Play video on loop</strong> </p><p>Enable this option to continuously replay the video after it reaches the end.</p><p></p><p><strong>Enable autoplay</strong> </p><p>Automatically starts the video when the section becomes visible to visitors.</p><p></p><p><strong>Enable controls</strong> </p><p>Display video playback controls such as play, pause, volume, and fullscreen options.</p><p></p><p><strong>Video alt text</strong> </p><p>Add descriptive text for the video to improve accessibility and help screen readers understand the content.</p></td></tr><tr><td>Media</td><td><p>The <strong>Media</strong> settings allow you to add a supporting image and promotional content that is displayed alongside the video.</p><p></p><p><strong>Image</strong> </p><p>Select an image to display alongside the video content. For visual guide show <a href="#image"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p>This image can be used to highlight products, collections, promotions, or complementary visual content.</p></td></tr><tr><td>Content</td><td><p><strong>Caption</strong> </p><p>Enter a short promotional text displayed above the heading. The rich text editor supports formatting such as <strong>bold</strong>, <em>italic</em>, links, and lists.</p><p>For visual guide show <a href="#caption"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Heading</strong> </p><p>Enter the main heading displayed over the media section.</p><p>For visual guide show <a href="#heading"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Size</strong> </p><p>Select the heading size to control its visual prominence.</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Extra large</li></ul><p>Available options may vary based on the selected theme design.</p><p></p><p><strong>Color scheme</strong> </p><p>Choose the color scheme used for the text and content area.</p><p>You can change the background and foreground color of the section using the color scheme:</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li><li>Scheme 7</li></ul></td></tr><tr><td>Button</td><td><p><strong>Label</strong> </p><p>Enter the text displayed on the call-to-action button. </p><p>For visual guide show <a href="#button"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Link</strong> </p><p>Select the page, collection, product, or external URL that customers will be redirected to when clicking the button.</p></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/QHcUklNFUdvOvKVn3Svx" alt=""><figcaption><p><strong>Video with media section</strong></p></figcaption></figure></div>

## Section settings screenshot

#### Video

<div data-with-frame="true"><figure><img src="/files/QIRHm2sLvGhE4a7cAKGh" alt=""><figcaption><p><strong>Video</strong></p></figcaption></figure></div>

#### Image

<div data-with-frame="true"><figure><img src="/files/5D0oIZ0McdQLKldczh1K" alt=""><figcaption><p><strong>Image</strong></p></figcaption></figure></div>

#### Caption

<div data-with-frame="true"><figure><img src="/files/l7MHuONoTbL5tu8PWfMl" alt=""><figcaption><p><strong>Caption</strong></p></figcaption></figure></div>

#### **Heading**

<div data-with-frame="true"><figure><img src="/files/K7trxNZWSrbIqFbSdxgn" alt=""><figcaption><p><strong>Heading</strong></p></figcaption></figure></div>

#### **Button**

<figure><img src="/files/UUDFUZjDcIIdqvRD3bd6" alt=""><figcaption></figcaption></figure>