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