# Как добавить видео (Video With Text)

*Актуально для версии темы Dawn 15.3.0*

***

{% hint style="info" %}
Если вы хотите избежать настройки кода, попробуйте тему [Shrine](https://vecomlab.com/shrine).

Более 120 встроенных функций, которые помогают улучшить конверсию и увеличить средний чек без необходимости настраивать дополнительные приложения и платить за подписки. Всё настраивается без кода, что экономит время и ресурсы.

<a href="https://vecomlab.com/shrine" class="button primary" data-icon="torii-gate">Shrine − 15% скидка</a>

Ваш промокод: `VECOMLAB`
{% endhint %}

<figure><img src="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FggIp3FbvefZ5sm33YzuL%2Fvecomlab-dev-4.jpg?alt=media&#x26;token=495824ae-42b1-48b7-b360-8bc48267f9d9" alt=""><figcaption></figcaption></figure>

### 1. Перейдите в редактор кода

<figure><img src="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FhadAXZKpQRDKqihNd7ec%2Fvecomlab-custom-social-media-icons-1.jpg?alt=media&#x26;token=9bc86e34-ebf4-4c9c-aa52-cf3ff99682ee" alt=""><figcaption></figcaption></figure>

Online Store → Themes → Edit code.

### 2. Откройте файл `image-with-text.liquid` в папке `sections`

<figure><img src="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FrCBvNITpP4paYOKLapVX%2Fvecomlab-continue-video-with-text-1.jpg?alt=media&#x26;token=9515f7e6-3820-4d16-8ffb-8093f813c526" alt=""><figcaption></figcaption></figure>

Найдите `image_picker` и вставьте код.

```
{
  "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://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FH6j1DFvSZ1NOMLSPb3gC%2Fvecomlab-continue-video-with-text-2.jpg?alt=media&#x26;token=b24440af-e9cd-411e-9153-44055485299d" alt=""><figcaption></figcaption></figure>

Найдите `{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}` и вставьте код.

```
{%- 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://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FBMrWqJXkU0H8sKtYveh4%2Fvecomlab-continue-video-with-text-3.jpg?alt=media&#x26;token=95d4a71d-7b99-47db-ab28-4d880ac12389" alt=""><figcaption></figcaption></figure>

Найдите строку с `class="image-with-text__media-item"` и замените её.

```
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. Откройте файл `component-image-with-text.css` в папке `assets`

<figure><img src="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FPcKkTSbt1itsjDNBLj9H%2Fvecomlab-continue-video-with-text-4.jpg?alt=media&#x26;token=dcc19011-ae1e-46c2-a581-cdb3fb02a15b" alt=""><figcaption></figcaption></figure>

В конец файла вставьте стили.

```
/*
  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://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2Fg3LdCVnLnY2hQYOr9nM7%2Fvecomlab-continue-video-with-text-5.jpg?alt=media&#x26;token=7e7a92ee-d7de-487e-bbe6-356d27868bc7" alt="" width="375"><figcaption></figcaption></figure></div>

***

*Нужна помощь с настройкой?* [*Свяжитесь с нами*](https://vecomlab.com/ru/pages/contact) *— мы всё сделаем за вас.*