# How to Add a Video (YouTube Video With Text)

*Relevant for Dawn theme version 15.3.0*

***

{% hint style="info" %}
If you want to avoid coding, try the [Shrine](https://vecomlab.com/shrine) theme.

[Shrine](https://vecomlab.com/shrine) offers over 120 built-in features that help improve conversion rates and increase the average order value, without the need to configure additional apps or pay for subscriptions. Everything is customizable without code, saving you time and resources.

<a href="https://vecomlab.com/shrine" class="button primary" data-icon="torii-gate">Use Shrine − 15% OFF</a>

Your discount code: `VECOMLAB`
{% endhint %}

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2Foo5GWxHNyVLjvoxh8pCv%2Fvecomlab-dev-5.jpg?alt=media&#x26;token=70bd9718-19db-4602-b07f-6ac14c5f2a9d" alt=""><figcaption></figcaption></figure>

### 1. Go to the code editor

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FuBp2PmlNX41DVfV0D9SI%2Fvecomlab-custom-social-media-icons-1.jpg?alt=media&#x26;token=c13f13c1-a0f5-4171-a06e-4944d96b94e3" alt=""><figcaption></figcaption></figure>

Online Store → Themes → Edit code.

### 2. Open the file `image-with-text.liquid` in the `sections` folder

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FDQlB8BrfQEBSaXVU5J34%2Fvecomlab-youtube-video-with-text-1.jpg?alt=media&#x26;token=443e32dc-abc0-4f6f-b6c2-dfda67042926" alt=""><figcaption></figcaption></figure>

Find `image_picker` and insert the code.

```
{
  "type": "video_url",
  "id": "youtube_video_url",
  "accept": [
    "youtube"
  ],
  "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
  "label": "YouTube Video Url",
  "placeholder": "Paste your YouTube video link here",
  "info": "t:sections.video.settings.video_url.info"
},
```

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FoEfJ5EaZSItxkkjZqqeN%2Fvecomlab-youtube-video-with-text-2.jpg?alt=media&#x26;token=d0dff789-90e0-4e9f-8561-c6ec4dd16619" alt=""><figcaption></figcaption></figure>

Find `section.settings.image` and insert the code.

```
{%- elsif section.settings.youtube_video_url.type == 'youtube' -%}
  <iframe src="https://www.youtube.com/embed/{{ section.settings.youtube_video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
```

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FjKmmJfrmYGJRliJ8zSnI%2Fvecomlab-youtube-video-with-text-3.jpg?alt=media&#x26;token=9626f853-38be-466e-ae2e-9e3489b4ba24" alt=""><figcaption></figcaption></figure>

Find `class="image-with-text__grid"` and insert the code.

```
{% if section.settings.youtube_video_url  %}image-with-text__youtube-container{% endif %}
```

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2Ffgq93K2gCioY2610HxMu%2Fvecomlab-youtube-video-with-text-4.jpg?alt=media&#x26;token=64fcf47b-05e2-4936-8834-19e4c362cafb" alt=""><figcaption></figcaption></figure>

Find the line with `class="image-with-text__media"` and insert the code right after `image-with-text__video{% endif %}`.

```
{% if section.settings.youtube_video_url %}image-with-text__youtube-inner-container{% endif %}
```

If you have already completed these adjustments:

{% content-ref url="video-with-text" %}
[video-with-text](https://docs.vecomlab.com/shopify-theme-setup/dawn/video-with-text)
{% endcontent-ref %}

### 3. Open the file `component-image-with-text.css` in the `assets` folder

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FPQgTVRWQCX2VP88bhUzt%2Fvecomlab-youtube-video-with-text-5.jpg?alt=media&#x26;token=a8f2e17b-ec25-4c70-9fae-d2961c7da0bc" alt=""><figcaption></figcaption></figure>

Paste the styles at the end of the file.

```
/*
  YouTube Video With Text
*/
.image-with-text__youtube-container {
  display: flex;
  align-items: center;
}

.image-with-text__youtube-inner-container {
  min-height: unset;
  padding-bottom: 56.25%;
  position: relative;
}

.image-with-text__youtube-inner-container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  border: 0;
}
```

<div align="left"><figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FIQyjwlwznNLdcZWGn0Ay%2Fvecomlab-youtube-video-with-text-6.jpg?alt=media&#x26;token=e2c3f6fb-3784-460b-b28e-16cd8b2480b0" alt="" width="375"><figcaption></figcaption></figure></div>

Save the changes and add the video link in the theme settings.

***

*Need help with setup?* [*Contact us*](https://vecomlab.com/pages/contact) *— we’ll handle everything for you.*
