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

🗓️ Оновлено: 09.08.2022
💬Коментарів: 2
👁️Переглядів: 4869

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

Ми будемо розглядати варіант, коли ви маєте доступ до коду сайту і можете вносити зміни. Ми не описуватимемо варіанти, як додати відео з 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
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Стаття була корисною?
👍
Так - 23
👎
Ні - 3
💬Коментарі:
Олександр

Привіт, підскажт будь ласка
Як вставити стрім ютуб і чат до цього стріму, на сторінку?
Дякую

Кирилл

Треба через блок Html коду вставити iframe трансляції. якщо ви створювали трансляцію з чатом, то чат буде відображатися

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 36711
Поява елементів при скролі
Переглядів: 29254
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 23017
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 17845
Як змінити колір SVG у CSS
Переглядів: 15686
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Колір 2023 року
Дослідницький інститут Pantone обрав головний колір 2023 року. Ним став карміново-червоний відтінок із фіолетовим підтоном, який назвали Viva Magenta.
#bb2649