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

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

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

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

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

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab