Назар Токар
Опубліковано: 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 Будьте в курсі. Долучайтесь до нашого каналу в Telegram.

    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    30 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

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

    Автор
    Назар Токар

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

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

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

    Автор
    Назар Токар

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

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

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

    Тобишь оставить просто: , тогда скрипт работает.

    Исправьте пожалуйста

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

    $("#youTuberContainer").append($("=X0NGm1PBSi4). И этот ID будет добавляться в общий код и всё в результате будет выглядеть так: <a href="=X0NGm1PBSi4" class="youtuber">

    <img style="width: 320px; height: 180px;" src="https://i.ytimg.com/vi/X0NGm1PBSi4/maxresdefault.jpg">

    Автор
    Назар Токар

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

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

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

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

    у меня опера 12.17

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

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

    Автор
    Назар Токар

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

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

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

    Автор
    Назар Токар

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

    Привет.

    Ссылка хонда-видеокотом не работает, если убрать " = " и остальное оставить, то работает.

    У меня Опера ... по ходу просто кидает на ютуб ... так и должно быть? :)

    Автор
    Назар Токар

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

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

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

    Автор
    Назар Токар

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