> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.support-vigbo.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Как вставить клип из ВКонтакте на сайт?

VK Клипы – это вертикально ориентированные ролики продолжительностью до 3 минут. Вы можете видеть их в виде бесконечной ленты как в приложении VK, так и на вкладке «Клипы» в основной соцсети. Такой формат роликов удобно использовать для размещения на сайте небольших видео, снятых на телефон.

1. В системе управления сайтом откройте страницу, на которой вы хотите разместить видео, и добавьте Виджет **Встроенный код**, перетянув его в нужную область страницы.

![screen-29.png](https://storage.crisp.chat/users/helpdesk/website/-/7/b/9/5/7b95b0b90c950800/95c5c7ed-86e9-45c4-b286-fe91a1_avcooa.png)

2. Нажмите кнопку **Добавить код**, скопируйте весь код, добавленный ниже, и вставьте в Виджет Встроенный код.

Код для копирования:

```
<style>  
.sh-wrap   
{position: relative;   
width: 100%;   
height: 0;   
padding-top: 177.7778%;  
padding-bottom: 0;   
margin-top: 1.6em;   
margin-bottom: 0.9em;   
overflow: hidden;  
border-radius: 8px;   
will-change: transform;  
}  
.sh-wrap iframe {  
position: absolute;   
width: 100%;   
height: 100%;   
top: 0;   
left: 0;   
border: none;   
padding: 0;  
margin: 0;  
}  
</style>  
<div class="sh-wrap">  
<!--Ниже добавьте код VK клипа -->

</div>
```

Результат должен выглядеть так, как на скриншоте:

![Screenshot_17.png](https://storage.crisp.chat/users/helpdesk/website/-/7/2/f/8/72f8caf643458800/48fec79f-18f7-48c4-9685-87023b_1uncpx4.png)

3. Откройте ваш клип во ВКонтакте.

4. Нажмите на три точки в правом верхнем углу ролика и выберите раздел **Поделиться**.

![Screenshot_18.png](https://storage.crisp.chat/users/helpdesk/website/-/1/f/3/1/1f3190c936f7a000/2a024fb6-ab84-4b91-8d2e-18679d_nr5x7r.png)

5. В открывшемся окне перейдите во вкладку **Экспортировать.** Задайте при необходимости настройки клипу и и скопируйте код для вставки.

![Screenshot_19.png](https://storage.crisp.chat/users/helpdesk/website/-/3/a/5/8/3a58fec4ff981c00/6dd70e1c-ae9a-4960-9eb5-fb3dc5_1qnk12z.png)

6. Добавьте скопированный код в системе управления сайтом **сразу после строки**

```
<!--Ниже добавьте код VK клипа -->
```

Должно получиться так:

![Screenshot_20.png](https://storage.crisp.chat/users/helpdesk/website/-/1/c/d/2/1cd25e94e0d40500/ed19e146-4404-460e-a2bd-46eeba_99z7z5.png)

Не забудьте сохранить изменения.

Управлять шириной ролика вы можете так же, как и шириной других виджетов в системе управления. Можно разместить несколько видео в одном ряду, добавить другие виджеты. Пример с тремя видео в одном ряду:

![Screenshot_21.png](https://storage.crisp.chat/users/helpdesk/website/-/e/4/9/a/e49a9855c2cdd000/ab6e120a-30d0-4297-9df6-88130b_ub3eia.png)

Для добавления горизонтальных роликов используйте Виджет **Видео**.  Подробнее о добавлении видео этим способом вы можете почитать в руководстве [Виджет Видео](/hc/ru/articles/115001010731).