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

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

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

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

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

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

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

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

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

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

Это iframe — с помощью этого года вы будете показывать кусочек ютуба (в нашем случае это будет видео) на сайте. Вам осталось лишь вставить скопированный код к себе в html.

Вставлять нужно туда, где вы хотите, чтобы отображался ваш ролик.

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

iframe {
  width: 100%;
}

А высоту вы уже можете подкрутить в зависимости от вашего дизайна. Ее можно указывать, как в самом коде iframe, так и через css-стили.

Статья была полезной?
👍
Да - 1
👎
Нет - 3
💬 Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Вступай в клуб
🧑‍💻Присоединяйся к сообществу!
Patreon
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
Где учиться
🧑‍🎓Рекомендуемые курсы
Javascript-разработчик
Введение в программирование
SEO-специалист
Проверка знаний
🤔Хорошо ли вы знаете 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