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

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

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

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

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

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

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

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

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

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

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

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

<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 0px rgba(3, 195, 0, 0.6);"></iframe>


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

Вставка в CMS

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

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

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

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

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

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

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

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

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

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

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

Понравилась статья? Поделись!