> For the complete documentation index, see [llms.txt](https://docs.vecomlab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vecomlab.com/ru/shopify-theme-setup/dawn/video-with-text.md).

# Как добавить видео (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="/files/tWMw9pvgwP7QRdFvdnmm" alt=""><figcaption></figcaption></figure>

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

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

Online Store → Themes → Edit code.

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

<figure><img src="/files/SRdnxYnH95zmVjDs1903" 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="/files/JbuqVBiojbsm0ng6zZlj" 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="/files/Gqz4oRfOFJKxrpaprQdz" 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="/files/Tf3Nyj6UAqUs8Inzbz6D" 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="/files/o4i8rLk38pv1QskLot6M" alt="" width="375"><figcaption></figcaption></figure></div>

***

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