В свете последних событий остро стоит вопрос о переходе с видеохостинга YouTube на аналогичную отечественную платформу. Часто выбор падает на VK Video. Соответственно, встает вопрос: как вставить VK Video на свой сайт. Сегодня речь пойдет про систему управления контентом Joomla, для которой я написал небольшой плагин. Значительно упрощающий задачу по вставке видео.

Как получить код VK Video?

Первое, что мы должны сделать — это получить код для вставки VK Video.

Для этого открываем необходимый видеоролик.

Кликаем правой кнопкой мышки и в контекстном меню выбираем пункт «Копировать пункт для встраивания»

Код будет скопирован в буфер обмена.

Второй способ — это нажать на кнопку «Поделиться», что расположена под окном просмотра ролика.

Откроется всплывающее окно, где необходимо перейти на вкладку «Экспортировать».

И скопировать код.

Это будет IFRAME.

Выглядеть код будет примерно так:

<iframe src="https://vk.com/video_ext.php?oid=85715340&id=456240900&hash=63adcd259aae7ea9" width="640" height="360" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media; fullscreen; picture-in-picture"></iframe>

В общем-то, этот код уже можно вставлять на сайт, однако, есть определенные нюансы.

Как сделать, чтобы видео растягивалось на всю ширину экрана?

Нередко вебмастера испытывают жгучее желание сделать так, чтобы видео растягивалось на всю ширину экрана.

Однако, по умолчанию, в полученном коде задается фиксированная ширина в пикселях, которая задается в аттрибуте width.

Чтобы исправить ситуацию поменяем код и зададим атрибут равным 100%.

Новый код будет выглядеть так:

<iframe src="https://vk.com/video_ext.php?oid=85715340&id=456240900&hash=63adcd259aae7ea9" width="100%" height="360" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media; fullscreen; picture-in-picture"></iframe>

Вставляем VK Video в Joomla

VK Video в Joomla мы можем вставить в любое место, где администратору предоставлена возможность ввода контента.

То есть VK видео может быть вставлено в статью, в описание товара, в модуль и т д.

Однако, есть большой и грустный нюанс.

Как правило, визуальные редакторы удаляют из кода тег IFRAME и вставить код в том виде, в котором нам его предоставляет сервис VK Video - не получится.

Я написал два плагина, которые решают данный вопрос и упрощают задачу по вставке видео на сайт.

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

https://sitogon.ru/joomla-plugins/vstavka-vk-video

Совместимость: Joomla 4.3.3 и выше, Joomla 5

Не пытайтесь установить плагины под Joomla 3!!!

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

В результате на жестком диске компьютера мы получим два плагина:

plg_editors-xtd_insertsitogonvkvideo.zip - плагин для вставки кода в визуальный редактор

plg_system_sitogonvkvideo.zip - системный плагин для вывода видео на сайте

Последовательно устанавливаем их через административную панель Joomla и далее каждый из плагинов активируем.

Хочется сказать пару слов перед тем, как

Дело в том, что начиная с версии 1.2.0, при работе с плагином больше нет необходимости вставлять код фрейма, про который ранее шла речь в этой статье.

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

До решения задачи — один шаг

Настало время открыть на редактирование материал в административной панели Joomla.

В визуальном редакторе кликаем мышкой по месту в статье, где планируется вставить видеоролик, далее нажимаем на кнопку «Вставить код VK Видео».

В некоторых редакторах эта кнопка может находиться под редактором.

Например, как здесь:

После нажатия на кнопку, откроется всплывающее окно, где мы должны вставить ссылку на видео, а также установить ширину и высоту ролика.

Обратите внимание!

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

Если мы устанавливаем ширину, как 100 процентов, это означает то, что видео будет растянуто на всю ширину блока.

После нажатия на кнопку «Вставить» будет сгенерирован код, который впоследствии, после открытия страницы посетителем сайта, будет преобразован в обычный IFRAME, а ещё точнее в медиаплеер, что воспроизведёт наше видео.

Далее не забываем сохранить статью, куда мы вставляли видео.

Результат работы плагина можно посмотреть на демонстрационном сайте по ссылке ниже:

https://joomla4.sitogon.ru/vk-video

Заключение

Как видим, задача по вставке VK Video на сайт вполне решаемая и несложная. 

С уважением, Владимир Егоров