Вставить видео в Joomla 3 или Joomla 4 с популярных видеохостингов, таких как YouTube и Vimeo, можно посредством пользовательского HTML-кода, плагина AllVideos и других сторонних расширений. Подробно рассмотрим все способы вставки и определим самый предпочтительный.

Способы вставки видео в Joomla

Разместить видео в контенте сайта через редактор можно посредством:

  • плагина AllVideos;
  • шорткодов ShortCode Ultimate или других ультимативных расширений;
  • пользовательского HTML-кода.

Давайте проанализируем каждый в соответствующем порядке.

Плагин AllVideos

AllVideos — плагин для Joomla, призванный упростить вставку видео в контент страниц.

Данное расширение пользуется огромной популярностью в первую очередь благодаря тому, что является полностью бесплатным: на момент написания данного материала общая оценка AllVideos на JED составляет 4.5 из 5 на основании 278 (!) голосов. Но не спешите устанавливать расширение: сперва давайте разберёмся, так ли всё гладко.

Принцип работы AllVideos прост: устанавливаем и активируем плагин, после чего можем вставлять видеоролики в Joomla из YouTube и прочих сервисов с помощью шорткодов. И тут у неосведомленного пользователя может возникнуть вопрос: а каких шорткодов? Действительно, этот момент не столь очевиден, и расширение не предусматривает никаких кнопок в редакторе для упрощения добавления видео. На самом деле это совсем не проблема, и стоит лишь понять синтаксис (короткая инструкция тут) и вставлять с помощью AllVideos больше не составит труда.

Пример шорткода вставки видео с YouTube:

{youtube}tj_V7BDHTxk{/youtube}

На выходе данный шорткод преобразуется в:

<div class="avPlayerWrapper avVideo">
 <div class="avPlayerContainer">
  <div id="AVPlayerID_0_0390e5e3928d306d1e22a07f2431470c" class="avPlayerBlock">
  <iframe src="https://www.youtube.com/embed/tj_V7BDHTxk?rel=0&fs;=1&wmode;=transparent" width="400" height="300" allowfullscreen="true" frameborder="0" scrolling="no" title="JoomlaWorks AllVideos Player"></iframe>
  </div>
  </div>
 </div>

Этот HTML-код и выводит на экран нужное нам видео.

Казалось бы: что может быть проще? Вставил часть URL-адреса в небольшой шорткод, а дальше — дело техники. Но не спешите радоваться! Если взглянуть за «занавес» веб-страницы, то можно увидеть целых 5 ресурсных файлов, которые добавляет к странице AllVideos.

Откровенно говоря, подгрузка 5 файлов для отображения ролика с YouTube — это перебор, ведь каждый лишний ресурс замедляет загрузку страницы.

Но это еще не самое страшное!

Полезно знать!
Опытным путём было установлено, что AllVideos конфликтует с плагином JCH Optimize (незаменим для оптимизации скорости загрузки сайтов на Joomla), мешая последнему правильно объединять JS-файлы, тем самым делая его вредным для сайта: файлы дублируются и размер страницы увеличивается вместе с временем её загрузки.

Итак, стоит ли устанавливать и использовать плагин AllVideos весом 1.4 Мб для вставки видео на сайт Joomla с учетом всего вышесказанного? Наш ответ: Нет!

Шорткоды для вставки видео

Существует достаточно большое количество ультимативных наборов шорткодов для вставки самых разных элементов в контент страниц Joomla, и практически каждый из них имеет в своём арсенале короткий код для вставки видео. Самым достойным представителем в линейке подобных расширений является Shortcode Ultimate.

Вставлять шорткоды Shortcode Ultimate — одно удовольствие. Чтобы добавить видео с YouTube:

  1. нажимаем кнопку Вставить шорткод в текстовом редакторе;
  2. из списка элементов во всплывающем окне находим и выбираем YouTube видео;
  3. вставляем ссылку на видео и при необходимости настраиваем другие параметры;
  4. можно просмотреть результат в текущем окне, нажав Предварительный просмотр;
  5. жмем Вставить шорткод.

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

[youtube url="https://www.youtube.com/watch?v=tj_V7BDHTxk"]

Как и в случае с AllVideos, данный код на выходе преобразуется в HTML, отображающий указанное видео. Если мы опять посмотрим в код страницы, то снова увидим несколько ресурсных файлов, добавляемых плагином, которые также не лучшим образом сказываются на скорости загрузки. Тем не менее, применение Shortcode Ultimate для вставки видео в Joomla 3 является более предпочтительным относительно AllVideos по следующим причинам:

  • ультимативный набор шорткодов;
  • кнопка редактора для вставки шорткодов;
  • наглядная настройка параметров видео;
  • никаких проблем с JCH Optimize.

Только одно «но»: Shortcode Ultimate является платным расширением. Не подходит? Читаем далее.

HTML-код для вставки видео

Универсальный способ вставки видео не только в Joomla, но и на любой сайт, является пользовательский HTML-код. И здесь не надо ничего придумывать:

  1. заходим на страницу видео с YouTube;
  2. кликаем по видео правой кнопкой мыши;
  3. из контекстного меню выбираем Копировать HTML-код;
  4. в редакторе TinyMCE жмем кнопку Выключить редактор (правый нижний угол) для перехода в режим вставки HTML (без форматирования);
  5. вставляем скопированный код и сохраняем;
  6. проверяем и видим, что видео на странице не появляется;
  7. возвращаемся в редактор и видим, что вставленного кода в нём нет.

Да, вставленный код был удалён после сохранения. Проблема в следующем:

Полезно знать!
Редактор TinyMCE по умолчанию удаляет из кода страниц тег , который находится в списке запрещенных тегов.

Чтобы это исправить:

  1. переходим в менеджер плагинов РасширенияПлагины;
  2. находим плагин Редактор - TinyMCE и переходим в его настройки;
  3. выбираем вкладку с набором для нужной группы пользователей (если вы являетесь суперадминистратором, то это будет Набор 0);
  4. находим опцию Запрещенные теги и удаляем оттуда <iframe>;
  5. сохраняем.

После этого возвращаемся к редактору Joomla, перезагружаем страницу с ним, жмем Выключить редактор и вновь вставляем скопированный с YouTube код, который выглядит приблизительно так:

<iframe width="424" height="238" src="https://www.youtube.com/embed/tj_V7BDHTxk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

На этот раз страница отобразит нужно нам видео, но в соответствии с параметрами, которые содержатся в скопированном коде: атрибуты тега <iframe> width и height содержат значения ширины и высоты окна проигрывателя в соответствии с его размерами на странице, с которой был скопирован код.

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

Чтобы каждое вставленное ручным способом видео отображалось таким образом, скопированный тег <iframe> нужно вставить в тег <div> со встроенными CSS-стилями position: relative; padding-bottom: 56.25%; height: 0, а добавить к нему стили position: absolute; top: 0; left: 0; width: 100%; height: 100%:

<div style="position: relative; padding-bottom: 56.25%; height: 0">
 <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/tj_V7BDHTxk" width="424" height="238" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

В результате видео будет пропорционально растянуто, а значения атрибутов width и height проигнорированы.

Чтобы облагородить код, отделим CSS от HTML. Сохраняем стили в соответствующий файл:

div.video{
	position: relative;
	padding-bottom: 56.25%; /* соотношение сторон 16:9 */
	height: 0;
}
div.video iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

После чего для размещения видео на сайте и его корректного отображения достаточно вставить скопированный с YouTube или другого ресурса код с <iframe> в тег <div> с классом video:

<div class="video">
 <iframe src="https://www.youtube.com/embed/tj_V7BDHTxk" width="424" height="238" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Преимущество вставки видео на сайт Joomla таким способом не требует установки лишних расширений и исключает подключение каких-либо ресурсных файлов. Однако применять шорткоды намного проще, чем всё время держать в памяти HTML-код, но этот момент можно упростить до минимума.

Упоминаемые термины:

CSS, HTML, JED, Joomla, Суперадминистратор