# Как добавить видео (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="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2Fd5Y2Bsot5aQJbAb2LwjW%2Fvecomlab-dev-5.jpg?alt=media&#x26;token=a0bef286-e43e-4f2c-a75c-c88a034eac57" 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%2FAgMe81SH4RbeBg1YSR6u%2Fvecomlab-youtube-video-with-text-1.jpg?alt=media&#x26;token=5c14ebe0-ef9e-4fba-af6a-ac2999c20387" 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="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FBAzHvFycvvKlAGJfh3GX%2Fvecomlab-youtube-video-with-text-2.jpg?alt=media&#x26;token=e98d9b5c-1917-4399-b7ee-0b5c5677ea68" 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="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FfTwEvhTnHdIxLhL5TBhb%2Fvecomlab-youtube-video-with-text-3.jpg?alt=media&#x26;token=8412a88a-f190-4679-8477-358be88b2e8f" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FHphILfhPHAP5DselGH24%2Fvecomlab-youtube-video-with-text-4.jpg?alt=media&#x26;token=2538b41e-6937-4430-8d6a-d8f33acb934e" 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="video-with-text" %}
[video-with-text](https://docs.vecomlab.com/ru/shopify-theme-setup/dawn/video-with-text)
{% endcontent-ref %}

### 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%2FRuxnSns7OSaDxCdoMDC8%2Fvecomlab-youtube-video-with-text-5.jpg?alt=media&#x26;token=5315f1b6-84b1-450e-a621-169952ea11d4" 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="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FShXLpQN5t1XxR4hveAG3%2Fvecomlab-youtube-video-with-text-6.jpg?alt=media&#x26;token=55cb299e-39b8-465d-8c3d-c2e92777b60a" alt="" width="375"><figcaption></figcaption></figure></div>

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

***

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