НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. Уроки для початківців. W3Schools українською

En Es De Fr

HTML YouTube Відео


Найпростішим способом відтворення відео в HTML є використання сайту YouTube.

Що таке YouTube і для чого він потрібен?

Додавання відео з YouTube на сайт

YouTube (від англ. you "ти, ви" + tube "труба" = "телевізор") - найбільший та найпопулярніший світовий відеохостинг, який надає послуги розміщення відеоматеріалів (вебадреса: https://www.youtube.com/). Заснований 14 лютого 2005 року трьома працівниками PayPal: Чадом Герлі, Стівеном Чені та Джаведом Карімом. Це підрозділ компанії Google. Станом на травень 2022 року YouTube є другим за відвідуваністю сайтом в Інтернеті (за даними компанії Alexa Internet).

Користувачі можуть додавати, переглядати та коментувати ті чи інші відеозаписи. Завдяки простоті та зручності використання YouTube став одним із найпопулярніших відеохостингів. Служба містить як професійні, так і аматорські відео, включаючи відеоблоги.

Будь-яка людина може безкоштовно зареєструватися на сайті Google (створити власний email), а потім перейти на сайт YouTube та створити власний відеоканал. Потім усі свої відео з YouTube можна вбудовувати на будь-які інші вебсторінки, використовуючи звичайний html-код.


Боротьба з відеоформатами

Раніше в цьому навчальному посібнику ви бачили, що вам доведеться конвертувати відео в різні формати, щоб зробити його відтворюваним у всіх браузерах.

Але конвертування відеофайлів у різні формати може бути досить складним і займати багато часу.

Простіше рішення - це вбудувати відео з YouTube для відтворення на вашій вебсторінці.


YouTube відео ідентифікатор - ID

YouTube відображатиме ідентифікатор (наприклад, tgbNymZ7vqY) під час збереження (або відтворення) відео.

Ви можете використовувати цей ідентифікатор та посилатися на своє відео в HTML-коді.


Відтворення відео з YouTube на сторінці HTML

Щоб відтворити відео з YouTube на вебсторінці, виконайте наведені нижче дії:

  • Завантажте відео на YouTube
  • Зверніть увагу на ідентифікатор відео - Id
  • Визначте елемент <iframe> на вашій веб-сторінці
  • Атрибут src вказує URL-адресу відео
  • Використовуйте атрибути width (ширина) та height (висота), щоб визначити розміри плеєра
  • Додайте до URL інші необхідні параметри (див. нижче)

Наприклад - Використання iFrame (рекомендується)

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Спробуйте самі »

YouTube Autoplay - автоматичне відтворення

Ви можете зробити автоматичне відтворення відео, коли користувач відвідує сторінку, додавши простий параметр до URL-адреси YouTube.

Примітка: Будьте уважні при прийнятті рішення про автоматичне відтворення відео. Автоматичний запуск відео може дратувати вашого відвідувача і зрештою завдати більше шкоди, ніж користі, тому що користувачі можуть відразу залишити сайт.

Значення 0 (за замовчуванням): відео не відтворюватиметься автоматично під час завантаження програвача.

Значення 1: відео відтворюватиметься автоматично під час завантаження програвача.

YouTube — Autoplay (автовідтворення)

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
Спробуйте самі »

YouTube Playlist — Список відтворення

Розділений комами список відео для відтворення (крім вихідної URL-адреси).


YouTube Loop — повторення відтворення відео (циклічність)

Значення 0 (за замовчуванням): відео відтворюватиметься лише один раз.

Значення 1: відтворення відео буде припинено після закінчення.

YouTube — Повторення

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Спробуйте самі »

YouTube Controls - Панель керування

Значення 0: елементи керування програвача не відображаються.

Значення 1 (за замовчуванням): елементи керування програвача відображаються.

YouTube - Панель керування

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Спробуйте самі »

YouTube - Використання <object> або <embed>

Примітка: YouTube <object> и <embed> вважаються застарілими із січня 2015 року. Ви повинні змінити спосіб додавання вашого відео, використовуючи <iframe> замість цього.

Приклад - використання <object> (застаріле)

<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY">
</object>

Приклад - використання <embed> (застаріле)

<embed width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">

Також ви можете переглянути статтю Як зробити адаптивним додане відео з YouTube? - тобто, як змінюються розміри вікна відео при зміні розміру вікна перегляду - на нашому сайті W3Schools українською.



Коментарі