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

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

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

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>

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

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

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

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

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

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

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

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

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

Для добавления горизонтальных роликов используйте Виджет Видео.  Подробнее о добавлении видео этим способом вы можете почитать в руководстве Виджет Видео.

Была ли статья полезной?
Поделиться

Не можете найти то, что надо?