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

# Video

Display a YouTube video viewer on your website.

{% embed url="<https://youtu.be/9BIYa86uMeU>" %}

A short video brings brand awareness to store visitors as well as increases engagement and entices more customers to the brand.

You should click Save button to check the change.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/2Lcrd0TuKmKU6aKEDqRx/video.jpg" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Video**
3. **Save**
   {% endhint %}

#### 1. General

**Layout:** You can choose between Container, Wrapped container, Full width for the banner layout.

**Color schema:** You are allowed to change text color, background color with preset color.

The display option for the video, whether as a **Popup** or in the **Background**, can be selected here.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/sVIzNOnzVnC0ue5SijDB/image.png" alt=""><figcaption></figcaption></figure>

#### 2. Video settings

Add a Youtube video link and adjust its ratio. The video image cover can be left blank if you want to use the video thumbnail.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/C0fWPjPKLJg0y8R9JsZr/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/L4pdyJd7O1wj0GCOK5Xq/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/5UDFW6OHMeJ9Qa8UI2pt/image.png" alt=""><figcaption></figcaption></figure>

**Add focal point:** This feature helps you select the most important part of an image for your store. It ensures that the focal points of the image always remain visible, even if a section crops the image to fit the layout.

<div><figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FjYcM20dceNDbVusyWVpo%2FScreenshot%202023-12-19%20120220.png?alt=media&amp;token=471137ca-13eb-468e-b20a-8563a3699223" alt=""><figcaption></figcaption></figure> <figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2F72U7oFwfcp8dT2NaJxcs%2FScreenshot%202023-12-19%20140615.png?alt=media&amp;token=656cbb71-4fe3-4838-9160-6e24be350e41" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Please follow this [link](https://help.shopify.com/en/manual/online-store/images/theme-images) for more information.
{% endhint %}

**3. Content setting**

Utilize the provided setting options to change the position and font of the heading, subheading and description.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/o8Q1kfNFuwb1K8MvVKIB/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/ZeFsJLlb1VKNR3Nt6114/image.png" alt=""><figcaption></figcaption></figure>

#### 4. Typography

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/Jy59FkrJaflSIWfzHUCV/video-typo.jpg" alt=""><figcaption></figcaption></figure>

#### 5. Section padding

Section padding allows you to specify the space between the slideshow and the preceding or following sections, or both.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/PqeKW7ZAP1dM8UAJYIvX/image.png" alt=""><figcaption></figcaption></figure>