YouTuber — YouTube и jQuery

1296376091_youtube_instantВставлять видео с можно простым копированием кода с самого сервиса. Если не нужно ничего настраивать, такой способ вам, скорее всего, подойдет. Я же хочу предложить традиционно простой скрипт, который покажет видео с Youtube во всплывающем слое без перезагрузки страницы.

Преимущества скрипта

  1. Удобство. Пользователь не уходит с сайта, в то же время может смотреть видео в удобном полноэкранном или развёрнутом режиме;
  2. Универсальность. Скрипт различает ссылки и на youtube.com и на youtu.be;
  3. Гибкость. В каком бы формате вы не добавили ссылку на ролик, скрипт ее распознает и обработает;
  4. Простота. Вам достаточно скопировать путь из адресной строки на youtube и вставить его к себе на сайт. Ссылку можно присвоить как тексту, так и изображению;
  5. Ссылки на ролики остаются ссылками, контекстное меню > открыть в новом окне откроет страницу на YouTube;
  6. Масштаб. Для разных разрешений ролик будет отображаться в том формате, который поместится на экран с соблюдением пропорций видео. При изменении размеров окна размер видео соответственно будет меняться.

Как это работает?

Копируете адрес ролика. Он может быть в любом формате и зачастую лишняя техническая информация вам не помешает. Вот примеры адресов, которые могут встречаться:

  • http://youtube.com/watch?v=X0NGm1PBSi4
  • https://youtube.com/watch?v=6BCOqA9xQWM
  • https://www.youtube.com/watch?v=5HIdQkOobL8&feature=youtu.be
  • https://www.youtube.com/watch?v=uSmNTZgs-QM&list=FLeAuaFK_wUaa8mngopR5Lhg&index=14
  • http://youtu.be/7HTfUeSSsQE

Роли не играет.

Как подключить

Загружаете файлы архива в папку /youtuber в корне вашего сайта. Далее в <head> подключаете скрипт:

&lt;script type="text/javascript" src="/youtuber/youtuber.js"&gt;&lt;/script&gt;

Стили для всплывающего окна подключатся автоматически. Если вы хотите загрузить файл в другую папку — пожалуйста. Только в youtuber.js вам нужно найти такой код: /youtuber/youtuber.css и заменить его на новый путь к файлу css.

Как настроить

К тем ссылкам, которые должны обрабатываться скриптом, добавляйте класс youtuber, например:

&lt;a href="https://www.youtube.com/watch?v=nEVn55GniUQ&amp;list=PL26DEDE7D73A53551&amp;index=2"&gt;
Пример видео
&lt;/a&gt;
<strong><a href="http://world-blog.ru/wp-content/uploads/2014/02/youtuber.zip">Скачать Youtuber</a></strong>

Запись навигация

Top