10 Лютий 2014
9 732
Рубрика: уроки

YouTuber — скрипт для просмотра видео с YouTube

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

Вставлять видео с YouTube можно простым копированием кода с самого сервиса. Если не нужно ничего настраивать, такой способ вам, скорее всего, подойдет. Я же хочу предложить традиционно простой скрипт, который покажет видео с 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> подключаете скрипт:

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

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

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

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

<a href="https://www.youtube.com/watch?v=nEVn55GniUQ&list=PL26DEDE7D73A53551&index=2">
Пример видео
</a>

Демо и скачать

Для примера я добавил несколько смешных роликов. Прошу.

Тепер я хочу бачити коментарі 30