В свете последних событий остро стоит вопрос о переходе с видеохостинга 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 и далее каждый из плагинов активируем.
До решения задачи — один шаг
Настало время открыть на редактирование материал в административной панели Joomla.
В визуальном редакторе кликаем мышкой по месту в статье, где планируется вставить видеоролик, далее нажимаем на кнопку «Вставить код VK Видео»
В некоторых редакторах эта кнопка может находиться под редактором.
Например, как здесь:
Откроется диалоговое окно, с текстовым полем, куда мы должны вставить скопированный ранее из VK код.
Нажимаем кнопку «Продолжить» и вуаля.
Наш код вставлен.
Как видим, код претерпел определенные изменения и теперь — это не IFRAME, а его содержимое заключенное в теги {VKVIDEO}{/VKVIDEO}.
Сохраняем статью.
Результат работы плагина можно посмотреть на демонстрационном сайте по ссылке ниже:
https://joomla4.sitogon.ru/vk-video
Заключение
Как видим, задача по вставке VK Video на сайт вполне решаемая и несложная. Если у вас остались вопросы, смело их задавайте в моей группе:
С уважением, Владимир Егоров
