Назар Токар
Опубліковано: 10 Лютого 2014
Оновлено: 3 Вересня 2017

Вставлять видео с 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>

Демо и скачать

Для примера я добавил несколько смешных роликов. Прошу.

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.
← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket
Обговорення

  1. Сергей

    У автора типичные ошибки в скрипте: класс в js – “youtuberBack”(одна большая буква – B) не совпадает с классом в стилях – “youTuberBack”(две большие буквы T и B). Также если на ссылке у вас висит класс – “youtuber”(как в примере), то js скрипт ищет класс “youTuber”(T – большая). Это особенно актуально на unix серверах. Нужно привести все к одному стилю написания(строки 9 и 51 в youtuber.js ). После исправления этих двух проблем, скрипт действительно работает.
    Так же я бы убрал подключение стилей в 8 строке “youtuber.js” и подключал бы их из места, где находятся все стили сайта. Иначе скрипт будет дополнительно искать их и пытаться подключить по пути: адрес_сайта/youtuber/youtuber.css. Будет висеть ошибка в консоли об отсутствии этого файла по этому пути.

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

    1. Назар Токарь

      Думаю, да, но этот скрипт для проигрывания одного видео.

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

  3. Максим

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

    1. @Максим, на локалке он мог не работать, обновил код, перезакачайте архив. Спасибо за инфу.

    2. Максим

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

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

    3. @Максим, код обрезается в коментах. То, о чём вы пишете, вероятно баг jQuery. Я думал, они его уже давно убрали. Какая у вас версия библиотеки?

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

    1. @Alexey, тестовая статья пустая.

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

  5. Raistlin

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

    1. @Raistlin, думаю, в Netscape 3 тоже не работает. И на Windows 3.1 ни в одном браузере.

  6. Сергей

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

    1. @Сергей, в строку

      $("#youTuberContainer").append($("<iframe />").attr({ 'src': '//youtube.com/embed/'+id, 'frameborder': 0, 'id': 'youTuber', "allowfullscreen": "" }));

      Добавьте параметр 'autoplay': 1

    2. Сергей

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

  7. Андрей

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

    1. Только не забывайте, что iframe будет заблокирован аддонами типа AdBlock или на уровне браузера, если не разрешить их отображение. Ну а если забить не некоторое количество пользователей, то можно пользоваться iframe. Благо сам youtube его выдаёт и можно обойтись без скриптов.

      Да и скрипт называется “Просмотр видео с Youtube”, а не “Встраивание облтжки видео в страницу”.

    2. @Андрей, если надо чтоб картинка сама вставлялась(обложка), то это не сложно сделать. В движке 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;https://i.ytimg.com/vi/<strong>X0NGm1PBSi4</strong>/maxresdefault.jpg"&gt;

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

  9. Александр Чернов

    у меня опера 12.17

  10. Александр Чернов

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

    1. @Александр Чернов, открыл в опере, проверил, работает.

    2. Равиль

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

  11. Олег

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

    1. @Олег, спасибо, что подробно описали ваш вопрос.

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

    1. @Антон, какая хонда? Вы класс присвоили ссылке? В Опере все работает отлично.

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

    3. Равиль

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

    4. @Равиль, может, заблочен jquery? Открываю в опере — работает.