Как вставить видео из VK на сайт

Вставка с помощью кода

Этот способ подходит, если вы хотите встроить видео вручную и обладаете базовыми знаниями HTML. Однако стоит учитывать, что любые изменения — например, замена видео или обновление параметров — требуют повторного редактирования кода. Для автоматизации и добавления интерактивных элементов (например, формы заявки прямо в видео) можно использовать альтернативу — QForm.

Шаг 1. Откройте страницу с нужным видео ВКонтакте. Под видеоплеером нажмите ссылку «Еще» и выберите пункт «Экспортировать».

Шаг 2. В появившемся окне скопируйте HTML-код с тегом iframe. Здесь же можно сразу выбрать размер окна (из предложенных вариантов или указать вручную) и включить автозапуск видео (по умолчанию видео не воспроизводится автоматически и стартует только по клику). Скопируйте получившийся iframe код.

Шаг 3. Вставьте скопированный код на свой сайт в том месте HTML-разметки, где должен отображаться видеоролик. После этого на странице появится встроенный плеер VK с выбранным видео. Если стандартных настроек недостаточно, код можно доработать вручную под свои задачи.

Например, внутрь тега <iframe> допускается добавить атрибуты для управления плеером:

• frameborder – показывать рамку вокруг плеера или нет.
• allow со значениями:
• autoplay – автоматическое воспроизведение видео/аудио при загрузке страницы;
• fullscreen – разрешает переключать плеер в полноэкранный режим.
• marginheight и marginwidth – отступы между содержимым плеера и его рамкой (по вертикали и горизонтали).
• hspace и vspace – отступы от плеера до окружающего контента (горизонтальный и вертикальный).

Чтобы изменить внешний вид встроенного плеера, можно использовать атрибут style с CSS-правилами. Например, добавим рамку определенного цвета, закруглим углы и установим тень для плеера. Код в итоге получится таким:

<iframe src="https://vk.com/video_ext.php?oid=-178652725&id=456239064&hd=2"
width="853" height="480"
allow="autoplay; encrypted-media; fullscreen; picture-in-picture;"
frameborder="0" allowfullscreen
style="border: 5px solid #df0da8; border-radius: 30px; box-shadow: -15px 15px 20px 0 rgba(3, 195, 0, 0.6);">
</iframe>

В результате плеер отобразится на странице с цветной рамкой, скруглёнными углами и тенью (как в нашем примере выше).

Знаем какие формы могут увеличить число заявок с вашего сайта!

Получи бесплатно PDF и рекомендации для современных веб форм

Подскажем, какой видеовиджет увеличит вам конверсию на 30%

Получи бесплатно PDF с эффективными кейсами

Расскажите мне

Вставка через CMS (на примере WordPress)

Если ваш сайт работает на популярной CMS, добавлять сторонний код обычно можно штатными средствами. Например, в WordPress достаточно использовать блок «Произвольный HTML». Для этого скопируйте HTML-код с <iframe> нужного видео (как описано выше), а затем:

Откройте админ-панель WordPress и перейдите к редактированию нужной страницы или записи.

В месте, где должно быть видео, добавьте новый блок: нажмите кнопку «+» и через поиск выберите блок «Произвольный HTML».

Вставьте в него скопированный код фрейма VK (начинающийся с <iframe>).

Сохраните или обновите страницу. После публикации записи плеер VK появится на сайте в указанной области.

Для WordPress также существуют плагины, упрощающие работу с видео. Многие из них позволяют добавить видео разными способами: загрузив файл напрямую, вставив ссылку или даже специальный шорткод. Вот несколько популярных плагинов для встраивания видео:

• Easy Video Player – простой плеер для добавления HTML5-видео;
• Videojs HTML5 Player – плагин на базе библиотеки Video.js с расширенными настройками;
• Ultimate Video Player – продвинутый универсальный видеоплеер;
• HTML5 Video Player – еще одно решение для вставки HTML5-видео через шорткод.

Примечание: Кстати, если вы хотите, чтобы видео не просто воспроизводилось, а вовлекало пользователя и помогало в достижении бизнес-целей, обратите внимание на инструменты, которые позволяют добавить в видео интерактивные элементы. Один из таких — видеовиджет QForm. В отличие от VK, он не показывает стороннюю рекламу и полностью контролируется вами — это особенно важно для сайтов, где важна чистота интерфейса и удержание внимания посетителя.

Интерактивный видеовиджет QForm – готовое решение для конверсии

Описанные выше способы позволяют встроить на сайт видео из VK, но при их использовании вам придется вручную редактировать код и обновлять страницу для любых изменений. Кроме того, стандартные плееры просто показывают видео, не влияя на конверсию напрямую. Если же вам нужно готовое решение, где видео сразу работает на сбор заявок, стоит попробовать интерактивный видеовиджет QForm. 

Как работает видеовиджет QForm (3 шага)

1. Загрузка видео. Запишите короткий ролик и загрузите его в личный кабинет QForm.
2. Настройка виджета. В визуальном конструкторе задайте вид отображения (например, вертикальный «видео в углу» или «в теле страницы», как на примере ниже), размеры и дизайн плеера под стиль вашего сайта. Добавляйте кнопку CTA на видео - направляйте клиента на страницу заявки, в мессенджеры или вызывайте форму прямо в виджете! 
3. Встраивание на сайт. Сервис сгенерирует короткий код скрипта. Разместите этот код у себя на сайте (в любом месте исходного HTML или через настройки CMS). Готово — интерактивный видеовиджет появится на странице и начнет работать сразу после сохранения, без дополнительных настроек.

Сценарии использования видеовиджета

Интерактивные видео с встроенными CTA-элементами могут принести пользу практически в любом онлайн-бизнесе. Вот лишь несколько примеров, как можно применять видеовиджет QForm в разных сферах:

• Интернет-магазины (e-commerce): Видеообзоры товаров, приветствие от основателя или демонстрация акционных предложений. Встроенная кнопка может вести прямо в каталог или форму заказа, что повышает конверсию и доверие к товару. Покупатели охотнее совершают покупку, когда видят продукт «вживую» и получают персональное обращение.
• Сервисы и SaaS-платформы: Короткое видео внутри сайта может показать ключевые возможности сервиса или дать инструкцию по началу работы. Кнопка в ролике приглашает зарегистрироваться или запросить демо-доступ. Это снижает порог входа для новых пользователей, так как вместо сухого текста их встречает живое объяснение.
• Онлайн-образование (EdTech): Видеоприветствие от преподавателя, мини-урок или тур по учебной платформе сразу вовлекает потенциального ученика. Через виджет можно предложить записаться на пробный урок или оставить заявку на курс. Такие видео создают эффект присутствия преподавателя и мотивируют начать обучение.
• Клиентский сервис и поддержка: Встроенное видео-обращение от менеджера поддержки на странице FAQ или помощи может быстро объяснить решение частой проблемы. Кнопка «Не решили проблему? — Связаться с нами» откроет чат или форму запроса. Это повышает лояльность: клиенты чувствуют заботу и получают помощь быстрее, чем через чтение длинных инструкций.

FAQ (Частые вопросы)

• Не замедлит ли видеовиджет загрузку сайта? Нет. Виджет подгружается асинхронно и не блокирует отображение остальной страницы. 
• Будет ли такой виджет нормально работать на мобильных устройствах? Да, QForm автоматически адаптирует видеоокно под размер экрана. Плеер responsive-дизайна: на смартфонах и планшетах виджет корректно масштабируется и не перекрывает важный контент.
• Нужны ли навыки программирования для установки? Совсем не нужны. Платформа QForm рассчитана на пользователей без технического бэкграунда.
• Можно ли встроить форму заявки прямо в видео? Да, в этом и состоит ключевое отличие QForm. Вы можете настроить появление формы сбора контактов или кнопки с ссылкой прямо во время воспроизведения ролика. 
• Чем видеовиджет QForm лучше обычной вставки видео с YouTube или VK? Обычные видеоплееры сторонних платформ ограничены: они позволяют только проигрывать ролик и показывают чужой бренд (логотипы, рекомендованные видео и т.д.). QForm же дает полный контроль над опытом пользователя: никакой лишней рекламы, дизайн в стиле вашего сайта, собственные сценарии показа.
• Сколько стоит использование QForm? Попробовать видеовиджет можно бесплатно. У QForm есть бесплатный тариф, которого достаточно, чтобы оценить все возможности сервиса на своем сайте.