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

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

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

Коменти

Сергей

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

Raistlin

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

Назар Токарь

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

Raistlin

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

Максим

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

Назар Токарь

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

Максим

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

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

Назар Токарь

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

Alexey

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

Назар Токарь

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

Alexey

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

Raistlin

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

Назар Токарь

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

Сергей

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

Назар Токарь

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

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

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

Сергей

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

Андрей

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

Назар Токарь

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

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

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;https://i.ytimg.com/vi/<strong>X0NGm1PBSi4</strong>/maxresdefault.jpg"&gt;

Вася

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

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

у меня опера 12.17

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

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

Назар Токарь

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

Равиль

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

Олег

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

Назар Токарь

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

Антон

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

Назар Токарь

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

Антон

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

Равиль

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

Назар Токарь

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