Статьи по теме: Заполнение сайта

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

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


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


screen-29.png


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


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


<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


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


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


Screenshot_18.png


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


Screenshot_19.png


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


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


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


Screenshot_20.png


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


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


Screenshot_21.png


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

Последнее изменение: 24/03/2026

Была ли эта статья полезна?

Поделиться отзывом

Отменить

Спасибо!