Как вставить видео с 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