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

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

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

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

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

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

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

4. Возможность передать параметры проигрывателя в ссылке (пример - https://youtu.be/qyLzu22baNY?t=11s). Подробнее о параметрах можно прочитать в статье "Параметры проигрывателя Youtube".

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>

Демо

Скачать плагин