Центр обучения Joomla
    Вставка видео в Joomla

    Как вставить видео на сайт Joomla?

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

    Содержание

    1. Способы вставки видео
    2. Плагин AllVideos
    3. Шорткоды сторонних расширений
    4. Пользовательский HTML-код
    5. Упрощаем вставку видео
    6. Выводы

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

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

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

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

    Плагин AllVideos

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

    AllVideos
    Расширение: AllVideos
    Категория: вставка видео
    Включает: плагин
    Совместимость: Joomla 3.x
    Версии: бесплатная
    Разработчик: JoomlaWorks

    Данное расширение пользуется огромной популярностью в первую очередь благодаря тому, что является полностью бесплатным: на момент написания данного материала общая оценка 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:

    Ресурсные файлы AllVideos

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

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

    Внимание:

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

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

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

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

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

    1. нажимаем кнопку Вставить шорткод в текстовом редакторе;
    2. из списка элементов во всплывающем окне находим и выбираем YouTube видео;
    3. вставляем ссылку на видео и при необходимости настраиваем другие параметры;
    4. можно просмотреть результат в текущем окне, нажав Предварительный просмотр;
    5. жмем Вставить шорткод.
    п. 1
    п. 2
    п. 3-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 по умолчанию удаляет из кода страниц тег <iframe>, который находится в списке запрещенных тегов.

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

    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-код, но этот момент можно упростить до минимума.

    Упрощаем вставку HTML-кода для видео

    Если отбросить всё лишнее, то HTML-код для вставки видео выглядит следующим образом:

    <div class="video">
     <iframe src="/"></iframe>
    </div>

    Т. е. всякий раз, когда необходимо добавить видео на страницу, мы вставляем данный код и в атрибут src копируем URL-адрес. С одной стороны в этом нет ничего сложного, с другой — этот код необходимо помнить.

    Упростить задачу можно до самого минимума с помощью специальных расширений:

    1. Компонент Content Templater

      Позволяет сохранять отдельные куски кода в качестве шаблонов и вставлять их с помощью кнопки в редакторе.

    2. Компонент Snippets

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

      {snippet youtube tj_V7BDHTxk}
    3. Компонент RoKCandy

      Этот компонент позволяет создавать шорткоды в формате BBCodes. Шорткод для вставки видео YouTube в этом компоненте может выглядеть так:

      [youtube]tj_V7BDHTxk[/youtube]

    Из предложенных вариантов я бы рекомендовал именно RokCandy, т. к. он позволяет использовать короткие коды внутри других шорткодов, что нельзя реализовать через Snippets, синтаксис заготовок которого ограничивается единой конструкцией. Что касается Content Templater, то он просто хранит в себе нужные нам фрагменты кода и облегчает их вставку.

    Выводы

    1. вставка видео в Joomla с помощью сторонних расширений (AllVideos и другие) добавляет к странице ресурсные файлы, что может негативно отражаться на скорости загрузки;
    2. плагин AllVideos конфликтует с JCH Optimize, что является веским аргументом против применения первого;
    3. если на сайте активно применяются шорткоды из Shortcode Ultimate (или ему подобных), то целесообразно использовать соответствующий шорткод из этого набора;
    4. вставка видео в виде HTML-кода является самым безболезненным для скорости загрузки способом способом;
    5. если редактор удаляет тег iframe, значит он находится в списке запрещенных тегов;
    6. упростить вставку HTML-кода для видео можно с помощью отдельных расширений.

    Как быстро разобраться в Joomla?

      Центр Обучения Joomla!

      "Все, что нужно знать о Joomla в одном месте"

      Joomla Последняя версия
      Joomla! — 3.9.2

      Скачать

      Курс "Как создать свой сервис рассылки на Joomla?"

      Чтобы получить бесплатный доступ введите имя и ваш е-маил. Доступ будет выслан на ваш е-маил адрес.

       

      Базовый курс по Joomla 3.9

      В КУРСЕ ВАС ЖДЕТ:

      Видеоуроки по Joomla 3.9

      После уроков вы: зарегистрируете домен и хостинг, установите и правильно настроите CMS Joomla, установите и настроите шаблон, получите понимание как работать с Joomla.

      Лучшие расширения для Joomla

      Вы получите список и описание лучших бесплатных и платных расширений для Joomla.

      Пошаговый процесс создания сайта

      Выполните 22 действия по чек-листу и ваш сайт готов.

      Хостинг в подарок

      3 месяца качественного хостинга в подарок для беззаботного начала работы над своим проектом.
      Введите e-mail для которого нужно выставить доступ к курсу: