# How to Add a Video (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%2FSrgNejsdOjwQtQaDNsin%2Fvecomlab-dev-4.jpg?alt=media&#x26;token=fe28e557-b9b6-4bd8-997e-4d14fa34804b" 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%2F8gzhdwdhx7SD30FXc7C4%2Fvecomlab-continue-video-with-text-1.jpg?alt=media&#x26;token=3a8cceb7-8663-45bc-b251-f2408bd4f3de" alt=""><figcaption></figcaption></figure>

Find the `image_picker` and insert the code.

```
{
  "type": "url",
  "id": "video_url",
  "label": "Video Url"
},
{
  "type": "url",
  "id": "video_image_url",
  "label": "Video Image Url"
},
{
  "type": "checkbox",
  "id": "autoplay",
  "label": "Autoplay if no sound"
},
{
  "type": "checkbox",
  "id": "show_controls",
  "label": "Show Controls"
},
{
  "type": "checkbox",
  "id": "loop_video",
  "label": "Loop Video"
},

```

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FBhGjcAaX4yTnQNtuutoO%2Fvecomlab-continue-video-with-text-2.jpg?alt=media&#x26;token=26f31162-207d-47f8-9e11-ade088716fcf" alt=""><figcaption></figcaption></figure>

Find `{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}` and insert the code.

```
{%- elsif section.settings.video_url -%}
  <video {% if section.settings.autoplay %} autoplay muted {% endif %} {% if section.settings.show_controls %} controls {% endif %} {% if section.settings.loop_video %} loop {% endif %} playsinline poster="{{ section.settings.video_image_url }}">
    <source src="{{ section.settings.video_url }}" type="video/mp4">
  </video>
```

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FthKfRJM8BiCdK4PUYWLD%2Fvecomlab-continue-video-with-text-3.jpg?alt=media&#x26;token=04012922-8e4f-43a7-aa99-aa1859a9209a" alt=""><figcaption></figcaption></figure>

Find the line with `class="image-with-text__media-item"` and replace it.

```
class="image-with-text__media{% if section.settings.video_url != blank %} image-with-text__video{% endif %} image-with-text__media--{{ section.settings.height }}{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}{% if section.settings.image != blank or section.settings.video_url != blank %} global-media-settings{% endif %}{% if section.settings.image != blank %} media{% elsif section.settings.video_url == blank %} image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"
```

### 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%2F2mDiqZB7bLeYLKF6Egaa%2Fvecomlab-continue-video-with-text-4.jpg?alt=media&#x26;token=cc9ed784-4cb2-4570-a0f3-a45a0a6de0cb" alt=""><figcaption></figcaption></figure>

Paste the styles at the end of the file.

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

.image-with-text__video video {
  width: 100%;
}
```

<div align="left"><figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FkSwDpOTHADs9q0O6Z0Q9%2Fvecomlab-continue-video-with-text-5.jpg?alt=media&#x26;token=744c8abe-47a8-427b-ab78-740f22134d32" alt="" width="375"><figcaption></figcaption></figure></div>

***

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