Вставлять видео с YouTube можно простым копированием кода с самого сервиса. Если не нужно ничего настраивать, такой способ вам, скорее всего, подойдет. Я же хочу предложить традиционно простой скрипт, который покажет видео с Youtube во всплывающем слое без перезагрузки страницы.
Преимущества скрипта
- Удобство. Пользователь не уходит с сайта, в то же время может смотреть видео в удобном полноэкранном или развёрнутом режиме;
- Универсальность. Скрипт различает ссылки и на youtube.com и на youtu.be;
- Гибкость. В каком бы формате вы не добавили ссылку на ролик, скрипт ее распознает и обработает;
- Простота. Вам достаточно скопировать путь из адресной строки на youtube и вставить его к себе на сайт. Ссылку можно присвоить как тексту, так и изображению;
- Ссылки на ролики остаются ссылками, контекстное меню > открыть в новом окне откроет страницу на YouTube;
- Масштаб. Для разных разрешений ролик будет отображаться в том формате, который поместится на экран с соблюдением пропорций видео. При изменении размеров окна размер видео соответственно будет меняться.
Как это работает?
Копируете адрес ролика. Он может быть в любом формате и зачастую лишняя техническая информация вам не помешает. Вот примеры адресов, которые могут встречаться:
- 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> Скачать Youtuber