Плагин SimpleYT для вставки видео с Youtube

Зачастую такая простая операция как вставка видео с сайта youtube на сайт под управлением CMS Joomla вызывает трудности. Связано это с тем, что редакторы Joomla вырезают тег iframe, через который можно добавить видео на сайт. Приходится либо настраивать редактор, либо отключать его полностью. Но и настройка редактора не всегда дает нужный результат и тег iframe продолжает удаляться из кода.

Даже, если вы настроили ваш редактор и тег iframe больше не вырезается, остается проблема адаптивности видео. Так, если использовать размер iframe предлагаемый сервисом Youtube, то при просмотре на мобильных устройствах ваш ролик, скорее всего будет обрезаться по ширине.

Избежать этих проблем и призван, созданный нами jQuery плагин SimpleYT.

Возможности плагина

1. Автоматическое определение ссылок на видео с сервиса Youtube. Вы можете просто вставить сгенерированную Youtube ссылку в ваш текст.

2. Настраиваемые селекторы для выбора видео. Вы можете указать класс блока или элемента, где находится ссылка на видео.

3. Обработка коротких (пример - https://youtu.be/qyLzu22baNY) и длинных (пример - http://www.youtube.com/watch?v=qyLzu22baNY) ссылок.

4. Возможность передать параметры проигрывателя в ссылке (подробнее о параметрах можно прочитать в статье "Параметры проигрывателя Youtube").Что бы передать параметры достаточно добавить атрибут data-yt-params с набором параметров

Пример:

<p><a data-yt-params="start=40&autoplay=1&width=300&height=150" href="http://www.youtube.com/watch?v=qyLzu22baNY">YouTube video 1</a></p>
В этом случае видео начнет проигрываться автоматически с 40-ой секунды. При этом ширина проигрывателя - 300px, высота - 150px

5. Адаптивный дизайн. Размер видео подстраивается под ширину экрана.

Установка

1. Подключаем плагин после подключения библиотеки jQuery

<script src="//simpleyt.js" type="text/javascript"></script>

2. Активируем плагин добавив следующий код в тело вашей страницы, или добавив его в ваш скрипт файл:

С настройками по умолчанию: 

jQuery("body").simpleYT();

С измененными настройками:

jQuery("body").simpleYT({
 ytselector:'a[href*="youtube.com/watch"], span:contains("youtu.be"), a[href*="youtu.be"]', // селектор поиска ссылок на видео
 exclude:'.popup-youtube', // исключение
 lento:11, // длина id (по умолчанию ссылка имеет длину - 11 символов. Если вы используете ссылки с параметрами, впишите в данное поле - "")
 width:560, // ширина проигрывателя Youtube
 height:316, //высота проигрывателя Youtube
 maxwidth:560, // максимальная ширина блока, в который автоматически помещается iframe с видео
 maxheight:316 // максимальная высота блока, в который автоматически помещается iframe с видео
 });

В нижеприведенном тексте все ссылки на видео будут показаны в проигрывателе, кроме первой, т.к. она имеет класс, который добавлен в исключение

<p>Ваш очень инетересный текст.............</p>
<p><a class="popup-youtube" href="http://www.youtube.com/watch?v=qyLzu22baNY">YouTube video 1</a></p>
<p>Еще один не мене интеесный текст <a href="http://www.youtube.com/watch?v=qyLzu22baNY">YouTube video 2</a></p>
<p>И еще один не мене интеесный текст <a href="https://youtu.be/qyLzu22baNY">YouTube video 3</a></p>
<p>И еще один не мене интеесный текст <span>https://youtu.be/qyLzu22baNY</span></p>

Демо

Демо-страница