Как вставить видео с YouTube в HTML

🗓️ Обновлено: 09.08.2022
💬Комментариев: 0
👁️Просмотров: 1881

В этой статье мы расскажем, как можно вставить видео с ютуба на сайт.

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

Подробная инструкция, как добавить видео из YouTube на сайт

Первый делом вы должны открыть видео, которое хотите вставить. Далее, нажимайте на кнопку «Поделиться», которая находится рядом с лайками/дизлайками:

Как добавить видео с ютуба на сайт
Нажимаете на кнопку ПОДЕЛИТЬСЯ

У вас появиться вот такое всплывающее окошко:

Добавляем youtube видео к себе на сайт
Нажимайте на «Встроить»

Нажимайте на кнопку «Встроить», как показано на рисунке. У вас должно появиться другое модальное окно (с вашим видео и кодом):

Как вставить код плеера Ютуб в html
Копируйте код

Вам нужно скопировать код, на который указывает красная стрелка на скриншоте выше.

Это 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
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 18274
Появление элементов при скролле
Просмотров: 16835
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 8525
Как выровнять картинку по центру с помощью CSS
Просмотров: 6944
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 6785
Проверка знаний
🤔Хорошо ли вы знаете 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