Встроенный HTML код позволяет размещать видео с YouTube на сайте, блоге или внутри CMS без загрузки самого файла. Этот код создаётся автоматически и содержит <iframe>-элемент, указывающий на источник видео.
Чтобы получить HTML код, откройте нужное видео на YouTube и нажмите кнопку «Поделиться» под видеоплеером. В появившемся окне выберите «HTML-код». Появится блок с кодом <iframe>, содержащий ссылку на видеохостинг и параметры встраивания.
По умолчанию код включает ширину и высоту плеера, а также атрибуты allowfullscreen и frameborder. При необходимости можно изменить размеры, удалить рамку или добавить параметры управления воспроизведением, такие как ?autoplay=1 или &controls=0.
Если доступ к кнопке «Поделиться» ограничен или видео встроено на стороннем ресурсе, HTML код можно получить из исходного кода страницы. Для этого нажмите правой кнопкой мыши на странице, выберите «Просмотреть код» или «Исходный код страницы», затем найдите элемент <iframe> с ссылкой на youtube.com/embed/.
Где находится кнопка «Поделиться» под видео на YouTube
Кнопка «Поделиться» расположена непосредственно под видеоплеером, чуть правее кнопки «Мне нравится». Она представлена в виде иконки стрелки, направленной вправо. При просмотре на компьютере элемент доступен без прокрутки страницы. На мобильных устройствах сначала отображаются кнопки оценки, затем кнопка «Создать клип», и только после них – «Поделиться».
Если видео открыто в полноэкранном режиме, кнопку не видно. Чтобы получить к ней доступ, необходимо выйти из полноэкранного просмотра. После нажатия на кнопку открывается всплывающее окно с опциями: копировать ссылку, встроить видео, отправить через социальные сети или мессенджеры. Для копирования HTML-кода выберите пункт «Встроить».
Как открыть меню с HTML-кодом для встраивания видео
Откройте нужное видео на YouTube. Ниже проигрывателя нажмите кнопку «Поделиться».
В появившемся окне выберите пункт «Встроить». Система отобразит HTML-код в теге <iframe>, готовый для копирования.
Перед копированием можно изменить параметры встроенного плеера: включение/отключение управления плеером, показ рекомендуемых видео и другие. Для этого воспользуйтесь чекбоксами под кодом.
После настройки нажмите правой кнопкой мыши по коду и выберите «Копировать» или используйте сочетание клавиш Ctrl+C (на Windows) или Cmd+C (на macOS).
Что означает каждая часть HTML-кода iframe YouTube
Пример стандартного HTML-кода для вставки видео с YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_видео" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Разбор элементов:
iframe |
Контейнер, загружающий внешний ресурс – в данном случае видеоплеер YouTube. |
width и height |
Размеры области проигрывателя в пикселях. Можно указывать и в процентах, например width="100%". |
src |
Ссылка на встроенное видео. Используется формат https://www.youtube.com/embed/ с указанием идентификатора ролика. Параметры можно добавлять через ?, например ?autoplay=1. |
title |
Текстовое описание для доступности. Отображается скринридерами. |
frameborder |
Устаревший атрибут. Значение 0 означает отсутствие рамки. В современных браузерах игнорируется. |
allow |
Определяет разрешённые функции. Например, autoplay включает автоматическое воспроизведение, clipboard-write – доступ к буферу обмена, encrypted-media – использование защищённого контента. |
allowfullscreen |
Разрешает переход в полноэкранный режим. Без него кнопка разворота может быть недоступна. |
Как изменить параметры встроенного видео перед копированием кода
Откройте нужное видео на YouTube и нажмите кнопку «Поделиться» под видеоплеером. В появившемся окне выберите «Встроить».
Перед копированием кода доступны следующие настройки:
1. Начало воспроизведения с определённого времени: установите галочку «Начать с» и введите нужное время. В коде появится параметр ?start=секунды.
2. Отключение отображения похожих видео: по умолчанию YouTube показывает рекомендованные ролики в конце. Чтобы этого избежать, вручную добавьте к URL параметр ?rel=0.
3. Отключение управления с клавиатуры: если нужно отключить hotkeys, добавьте &disablekb=1.
4. Скрытие элементов управления: добавьте &controls=0, если не хотите отображать кнопки воспроизведения и тайм-код.
5. Отключение названия и логотипа: чтобы убрать заголовок видео и логотип YouTube, используйте параметр &modestbranding=1.
6. Автоматическое воспроизведение: добавьте &autoplay=1, чтобы видео запускалось сразу при загрузке страницы (не рекомендуется для всех случаев – влияет на пользовательский опыт).
После настройки скопируйте обновлённый код из окна и вставьте его в HTML страницы. Параметры добавляются в атрибут src тега <iframe> через ? или &, если параметры комбинируются.
Как скопировать HTML-код без лишних элементов
Откройте нужное видео на YouTube. Под плеером нажмите кнопку «Поделиться», затем выберите «Встроить». В появившемся окне отобразится фрагмент HTML-кода в теге <iframe>.
Перед копированием снимите все галочки под кодом. По умолчанию YouTube добавляет параметры, например «показать похожие видео» или «включить режим конфиденциальности», что увеличивает объём кода и может повлиять на внешний вид плеера.
Выделите только строку с тегом <iframe>. Убедитесь, что в ней нет дополнительных атрибутов вроде enablejsapi=1 или origin=, если они не требуются. Эти параметры добавляются автоматически и чаще всего не нужны для стандартной вставки.
Если код уже вставлен на страницу, откройте HTML-редактор, найдите <iframe> и удалите всё, что находится вне него, включая обёртки вроде <div> или <script>, если они добавлены системой управления контентом.
Результат – чистый <iframe> с минимальным набором параметров: src, width, height, frameborder, allowfullscreen. Этого достаточно для корректного отображения плеера без лишнего кода.
Можно ли получить HTML-код с мобильного устройства
Получить HTML-код для встраивания YouTube-видео с мобильного устройства можно, но только через браузер в режиме десктопной версии. Стандартное мобильное приложение YouTube не предоставляет доступа к этой функции.
Откройте сайт youtube.com в браузере (например, Chrome), нажмите на меню браузера и выберите пункт «Полная версия сайта». После загрузки найдите нужное видео, нажмите «Поделиться» под роликом и выберите «Встроить». Откроется окно с HTML-кодом iframe, который можно скопировать и вставить на сайт.
Если кнопка «Встроить» отсутствует, значит автор ограничил возможность встраивания. В этом случае код получить невозможно ни с мобильного, ни с компьютера.
Для удобной работы с кодом рекомендуется использовать внешнюю клавиатуру или текстовый редактор с поддержкой вставки HTML. Некоторые мобильные редакторы и CMS позволяют вставлять iframe напрямую в HTML-блоки, что упрощает добавление видео с мобильного устройства.
Как вставить полученный HTML-код на свой сайт
Вставка кода видео с YouTube выполняется через тег <iframe>, который YouTube предоставляет в блоке «Поделиться» → «Встроить». После получения кода выполните следующие действия:
- Откройте HTML-файл страницы, где должно отображаться видео.
- Найдите место, куда нужно вставить видео, например, внутри тега
<div>или перед</body>. - Вставьте скопированный код
<iframe>без изменений.
Пример кода:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ИД_ВИДЕО" frameborder="0" allowfullscreen></iframe>- Параметры
widthиheightможно изменить под нужный размер блока. - Атрибут
allowfullscreenвключает полноэкранный режим. - Если сайт использует адаптивную верстку, замените фиксированные размеры на относительные с помощью CSS.
- Для нескольких видео используйте отдельный
<iframe>для каждого. - Избегайте вставки внутрь интерактивных элементов – это может нарушить отображение.
После вставки обновите страницу сайта и проверьте загрузку видео в браузере.
Вопрос-ответ:
Где именно на YouTube находится HTML-код для встраивания видео?
Чтобы получить HTML-код для вставки видео, откройте нужное видео на YouTube, затем нажмите кнопку «Поделиться» под видео. В появившемся окне выберите пункт «Встроить». Откроется окно с HTML-кодом, который начинается с тега `