Як вставити відео з YouTube в HTML

У цій статті ми розповімо, як можна вставити відео з ютубу на сайт.

Ми будемо розглядати варіант, коли ви маєте доступ до коду сайту і можете вносити зміни. Ми не описуватимемо варіанти, як додати відео з Youtube на сайти, що працюють на конструкторах або різних CMS. Якщо ви знатимете принцип, як додати відео з Ютуба в HTML код, то ви зможете реалізувати це на будь-яких платформах.

Детальна інструкція, як додати відео з YouTube на сайт

Насамперед ви повинні відкрити відео, яке хочете вставити. Далі, натискайте на кнопку “Поділитися”, яка знаходиться поряд із лайками/дизлайками:

У вас з’явиться ось таке віконце, що спливає:

Натискайте кнопку “Вбудувати”, як показано на малюнку. У вас має з’явитися інше модальне вікно (з вашим відео та кодом):

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

Це iframe. За допомогою цього коду ви показуватимете шматочок ютуба (у нашому випадку це буде відео) на сайті. Вам залишилося лише вставити скопійований код до себе в HTML.

Вставляти потрібно туди, де ви хочете, щоб відображався ваш ролик.

Важливо відзначити два атрибути, які є в iframe коді – це width (ширина) та height (висота). Ми рекомендуємо прописати для iframe свої css-стилі. Наприклад, задати ширину – 100% (щоб відео займало всю ширину блоку, а не виходило за його межі на мобільних пристроях):

iframe {
  width: 100%;
}

А висоту ви можете підкрутити в залежності від вашого дизайну. Її можна вказувати як у самому коді iframe, так і через css-стилі.

iframe {
  width: 100%;
  height: 450px;
}

Що ж, це простий варіант, як вставити відео з Ютуба на сайт за допомогою iframe коду. Є варіант через API – проте, він значно складніший. Якщо вам цікаво, як реалізувати це, то ставте запитання у коментарях.

CSS Головоломки в Telegram

Підписуйся і не пропускай:

Актуальні новини

Цікаві завдання

Корисні добірки

Перейти до Telegram