> 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/youtube-video-with-text.md).

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

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

```
{
  "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="/files/wDIMJlA06vbwzu2MLnHK" alt=""><figcaption></figcaption></figure>

Найдите `section.settings.image` и вставьте код.

```
{%- 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="/files/hhbNm6rViEBxmwjobj0C" alt=""><figcaption></figcaption></figure>

Найдите `class="image-with-text__grid"` и вставьте код.

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

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

Найдите строку с `class="image-with-text__media"` и вставьте код сразу после `image-with-text__video{% endif %}`.

<pre><code><strong>{% if section.settings.youtube_video_url %}image-with-text__youtube-inner-container{% endif %}
</strong></code></pre>

Если вы уже выполнили эти настройки:

{% content-ref url="/pages/CUsesOP3uWSAvObE5Bvy" %}
[Как добавить видео (Video With Text)](/ru/shopify-theme-setup/dawn/video-with-text.md)
{% endcontent-ref %}

### 3. Откройте файл `component-image-with-text.css` в папке `assets`

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

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

```
/*
  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="/files/mEruKxKK8FHQm6y6FLMW" alt="" width="375"><figcaption></figcaption></figure></div>

Сохраните изменения и добавьте ссылку на видео в настройках темы.

***

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