Скрипт для просмотра видео с YouTube в модальном окне
Всем привет. Поздравляю с уже наступившим новым 2016 годом. Это первая статья в этом году, но я не стал выкладывать что-то грандиозное по этому поводу. Во-первых, ничего такого прямо уж грандиозного у меня и нет, а во-вторых, просто хочу выложить то, что у меня накопилось на рабочем столе (это все ради того, чтобы его почистить). Это, конечно, надо было сделать еще в прошлом году, но с работой я не успевал и пришлось в Новый год уходить с «грязным» рабочим столом.
Ну да ладно. Что-то я отвлекся. В этой статье я буду говорить о небольшом довольно простом скрипте просмотра видео с YouTube в модальном окне. Тут ничего не расскажешь, поэтому лучше сразу посмотрите «Демо». Скрипт подойдет для тех, кто ищет воспроизведение видео с YouTube в отдельно открывающемся окошке на все разрешение экрана. В правом верхнем углу предусмотрен крестик, для закрытия модального окна.
Преимущество скрипта в простоте установки и скорости загрузки. Скрипт легкий, простой и в нем нет ничего лишнего.
Установка скрипта на сайт
Инструкция для тех, у кого уже есть сайт и он хочет (или она) добавить воспроизведение роликов с YouTube в модальном окне.
1. Скачайте архив
Для начала нужно скачать архив и разархивировать его
2. Залейте необходимые файлы на сервер
В корень вашего сайта нужно залить папку youtuber и файл jquery.js (его вы можете залить туда, где у Вас лежат все скрипты)
3. Подключите скрипты
Между тегами <head> и </head> вставьте следующий код
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="youtuber/youtuber.js"></script>
Соответственно, проверьте пути, у вас они могут отличаться
4. Вставьте html код
Ну и последний шаг — это вставить html код туда, где вы хотите разместить ссылку на открытие модального окна с видео. Код выглядит так:
<a href="https://www.youtube.com/watch?v=5HIdQkOobL8&feature=youtu.be" class="youtuber"><img src="i/1.jpg" alt=""></a>
Где
- https://www.youtube.com/watch?v=5HIdQkOobL8&feature=youtu.be — это ссылка на видео с ютуба. Скрипт может распознавать разного рода ссылки
- class="youtuber" — обязательный атрибут для работы скрипта
- <img src="i/1.jpg" alt=""> — элемент ссылки, вместо которой может быть текст или другое изображение
Если вы все сделали правильно, то скрипт заработает. Если же что-то пошло не так, сначала проверьте все пути (подключение скриптов, картинок, ссылку на видео). Если и там все нормально, значит возможен конфликт скриптов, а в частности версии библиотеки jquery. В этом случае оставьте самую последнюю версию. Всего доброго.
Комментарии ()