Скрипт для просмотра видео с YouTube в модальном окне

Скрипт для просмотра видео с 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. В этом случае оставьте самую последнюю версию. Всего доброго.

Похожие статьи