Вставлять видео с 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 Комментарий на "YouTuber — скрипт для просмотра видео с YouTube"

    Уведомлять
    avatar
    5000
    Raistlin
    Гость

    А как насчет проигрывания плейлиста с ютуба? Есть ли возможность такое сделать?

    Raistlin
    Гость

    Не хотите ли попробовать скрипт переделать под эту функциональность? Было бы интересно. Аналогов я пока не нахожу.

    Максим
    Гость

    Скачал исходники с вашего блога. Даже пример не работает… Ваш архив не рабочий.

    Максим
    Гость

    @Назар Токарь, Нашел баг js скрипта. В моей верстке в начале код был указан:

    Но с данным написанием скрипт отказывался работать. Я весь день провозился, где проблема. Чисто случайно наткнулся на решение проблемы. После проанализировал и вывел проблему. Если убрать объявление версии html:
    Тобишь оставить просто: , тогда скрипт работает.
    Исправьте пожалуйста

    Alexey
    Гость

    Здраствуйте, сто раз перепроверял в чём дело, но так и не получилось завести скрипт. Файлы на хостинг залил, ссылку на JS в header добавил, к ссылке класс указал, но ничего не получается. Ссылка переводит на страницу youtube с видео. Вот кому не сложно, (ссылка на сайт) ,там первая статья тестовая с ссылками с классом youtuber и в header подключенный скрипт: также можно найти. Посмотрите пожалуйста и напишите в чём может быть проблема.

    Alexey
    Гость

    @Назар Токарь, сори я просто в краткое описание добавил ссылку, но раз такое дело то в полное также добавил, а скрипт подключен прямо перед . Посмотрите еще раз если не сложно пожалуйста :)

    Raistlin
    Гость

    Скрипт не работает в ИЕ 8

    Сергей
    Гость

    Здравствуйте, а что необходимо изменить в скрипте, чтобы в окне после открытия видео начинало сразу воспроизводиться (то есть пользователю не нужно было кликать на плей)… Буду оченб благодарен.

    Сергей
    Гость

    @Назар Токарь, Спасибо!

    Андрей
    Гость

    Фигня полная. Кто будет этим пользоваться? Можно и через обвертывания в iframe сделать также и буквально в одну строчку. Я думал скрипт умеет выдавать ссылку на картинку и встраивать в HTML. Ну а этот скрипт как 5 копеек.

    Alexey
    Гость

    @Андрей, если надо чтоб картинка сама вставлялась(обложка), то это не сложно сделать. В движке DLE например можно это реализовать через дополнительные поля. В статье можно вписывать ссылку, а точнее ID видео, к примеру такое X0NGm1PBSi4 , это то что идёт после v= (http://youtube.com/watch?v=X0NGm1PBSi4). И этот ID будет добавляться в общий код и всё в результате будет выглядеть так: &lt;a href=&quot;http://youtube.com/watch?v=<strong>X0NGm1PBSi4</strong>" class="youtuber"&gt; &lt;img style=&quot;width: 320px; height: 180px;&quot; src=&quot<a rel="nofollow" target="_blank" href="https://i.ytimg.com/vi/strongX0NGm1PBSi4/strong/maxresdefault.jpg"><img alt="comment image" src="https://i.ytimg.com/vi/strongX0NGm1PBSi4/strong/maxresdefault.jpg" /></a>"&gt;

    Вася
    Гость

    Вообще прикольный скрипт, а можно для чайника пошагово показать как его установить на сайт, а то я мутил -мутил нифига не получается((( За ранее спасибо!

    Александр Чернов
    Участник

    у меня опера 12.17

    Александр Чернов
    Участник

    Здравствуйте,подскажите как исправить ошибку с оперой,в опере он просто переходит на страницу ютуба.

    Равиль
    Гость

    @Назар Токарь, Версия Opera: 12.14, т.е. опера на “старом” движке – открывает видео на ютьюбе… В Опере на “новом” движке проблем нет.

    Олег
    Гость

    Все сделал как написано, ничего не получается. Ссылка переводит на страницу youtube с видео.

    Антон
    Гость

    Привет.
    Ссылка хонда-видеокотом не работает, если убрать ” http://youtube.com/watch?v= ” и остальное оставить, то работает.
    У меня Опера … по ходу просто кидает на ютуб … так и должно быть? :)

    Антон
    Гость

    @Назар Токарь, в твоем примере демо при нажатии на картинку просто переходит ютуб.
    Версия: 12.16
    Сборка: 1860
    Платформа: Win32
    Система: Windows XP
    Но при нажатии на смешное видео с котом и ссылка не работает, пишет, что такого видео не существует.

    Равиль
    Гость

    @Антон, да, подтверждаю, в опере происходит просто пересылка на страницу с видео на ютубе…
    Впрочем, в более свежих версиях Оперы (18, например), все работает как надо.

    wpDiscuz