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

ВКонтакте содержит большое количество видеороликов, которые можно добавить на свой сайт. В этой статье рассмотрим несколько способов, как вставить видео из ВКонтакте на страницу сайта.

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

Перейдите на страницу видео ВКонтакте

Нажмите под плеером ссылку «Еще» и выберите «Экспортировать»

В появившемся окне скопируйте код с тегом <iframe>. При необходимости можно выбрать размер видео (один из вариантов, либо указать произвольные параметры) и включить автозапуск (по умолчанию он отключен, воспроизведение начинается по клику на окно).

Затем вставить код внутри html-документа в нужное место.

После этого ролик появится на странице

Если настроек по умолчанию мало, то можно сделать это вручную.

Взглянем на некоторые атрибуты, которые можно добавить внутрь тега iframe:

• frameborder – устанавливает, отображать границу вокруг плеера или нет.
• allow со значением:
  • autoplay – Позволяет автоматически воспроизводить видео и аудио файлы
  • fullscreen – позволяет встроенному контенту открываться в полноэкранном режиме.
• marginheight – отступ сверху и снизу от содержания до границы фрейма.
• marginwidth – отступ слева и справа от содержания до границы фрейма.
• hspace – горизонтальный отступ от фрейма до окружающего контента
• vspace – вертикальный отступ от фрейма до окружающего контента.

Чтобы изменить внешний вид плеера, пропишите атрибут style и перечислите стили в виде пары «ключ: значение». К примеру, добавим рамку для нашего видео, изменим цвет, закруглим края и установим тень. Готовый код выглядит так:

И вот результат:

Вставка в CMS

Если сайт работает на какой-либо системе управления контентом (CMS), то для обычной вставки подойдут и стандартные средства. К примеру, у WordPress есть возможность использовать блок «Произвольный HTML».

Для этого найдите нужное видео и скопируйте код с тегом <iframe>, как в инструкции выше.

После этого вернитесь в WordPress и откройте страницу редактирования записи.

Чтобы добавить новый блок, нажмите кнопку «+» в верхнем левом углу.

Откроется меню для выбора блока. В строку поиска введите «Произвольный HTML» и выберите соответствующий блок.

Вставьте скопированный код фрейма в поле «Пишите HTML …».

Опубликуйте запись, после чего ролик появится на сайте.

Кроме стандартных средств в WordPress существует библиотека плагинов, среди которых есть и для работы с видео. Они предлагают следующие способы добавления: загрузка с компьютера, по прямой ссылке или по шорткоду.

Вот несколько из них:

• Easy Video Player,
• Videojs HTML5 Player,
• Ultimate Video Player,
• HTML5 Video Player.

Готовое решение от QForm

Эти способы позволяют встроить видео из ВК на свой сайт. Но стоит учитывать, что при их использовании может потребоваться ручное редактирование кода и обновление страницы. Но если нужно решение, где изменения применяются автоматически, то подойдет видеовиджет Qform. С его можно добавить видео на страницу всего за пару кликов, выбрать один из видов отображения и настроить параметры запуска.