Как добавить видео на сайт: 4 способа, код и что выбрать

Добавить видео на сайт можно четырьмя способами: вставить плеер с видеохостинга (YouTube, Rutube, VK Видео), поставить встроенный плеер браузера с видеофайлом mp4, сделать фоновое видео на первом экране или подключить всплывающий видеовиджет - карточку с видео в углу экрана. Первые три показывают ролик, четвёртый ведёт к заявке.

Дальше - каждый способ с кодом и минусами, а в конце - как выбрать под свою задачу.

Зачем видео на сайте

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

1. Доверие. Живое лицо и голос работают убедительнее стоковых картинок. Это заметно в услугах, где клиент боится ошибиться: ремонт, медицина, обучение, B2B.
2. Вовлечение. Движение в поле зрения замечают даже те, кто пролистывает страницу по диагонали. Человек задерживается на странице дольше.
3. Понятность. Сложный продукт или процесс проще показать за минуту, чем описывать пятью экранами текста.

И отдельная история - конверсия. Когда видео стоит рядом с кнопкой «Оставить заявку», оно доводит посетителя до действия.

Способ 1. Плеер с видеохостинга

Самый быстрый путь. Видео уже загружено на YouTube, Rutube или VK Видео, остаётся поставить его на страницу.

В интерфейсе площадки нажмите «Поделиться» - «Встроить» и скопируйте код. Получится примерно такой фрагмент:

<iframe src="https://www.youtube.com/embed/КОД_ВИДЕО" width="560" height="315" loading="lazy" allowfullscreen></iframe>

Код вставляют туда, где должно быть видео: в HTML-файл, в HTML-блок конструктора или в блок «HTML» в WordPress.

Плюсы: бесплатно, файл хранится на площадке, плеер сам подстраивается под экран, не нужно думать о форматах и кодеках.

Минусы: площадка показывает свои логотипы, а после ролика - чужие рекомендации; на бесплатных тарифах видеохостинга бывает реклама. Главное - вы зависите от хостинга: если видео заблокируют или удалят, на сайте останется пустой прямоугольник. Для аудитории в России практичнее Rutube и VK Видео, чем YouTube.

Когда подходит: показать ролик внутри статьи или на странице «О компании», когда важен сам факт просмотра, а не бренд плеера.

Способ 2. HTML5-плеер с вашим файлом

Видео может быть вашим полностью, без чужого логотипа и рекомендаций. Тогда нужен HTML5-плеер - тот, что встроен в сам браузер. В коде страницы он задаётся командой video.

<video src="/video/rolik.mp4" poster="/img/cover.jpg" controls playsinline preload="metadata" width="960"> </video>

controls включает кнопки управления, playsinline не даёт видео разворачиваться на весь экран на iPhone. poster показывает картинку-превью до старта, а preload="metadata" не тянет весь файл сразу. Полный список атрибутов есть в справочнике MDN.

Плюсы: полный контроль над видом, никакой чужой рекламы и брендинга, видео не исчезнет со страницы из-за блокировки площадки.

Минусы: файл и трафик - на вас. Нужен mp4 с кодеком H.264 (его понимают все браузеры), а ролик большого размера замедлит загрузку страницы. Видео придётся хранить на своём хостинге или в CDN - это сеть серверов, которая отдаёт файлы из точки, ближайшей к посетителю.

Когда подходит: короткий ролик на видном месте, когда важны бренд и качество картинки.

Способ 3. Фоновое видео

Видео без звука на весь первый экран, поверх - заголовок и кнопка. Так делают лендинги премиальных услуг и промо-страницы.

Технически это та же команда video, но с автозапуском и без звука:

<video autoplay muted loop playsinline poster="/img/first-frame.jpg"> <source src="/video/background.mp4" type="video/mp4"> </video>

Плюсы: сильный вау-эффект на входе, сразу задаёт настроение.

Минусы: самый тяжёлый вариант для мобильного интернета и скорости загрузки. Автозапуск со звуком браузеры блокируют, поэтому видео всегда беззвучное. Текст поверх видео читается хуже, а сама страница грузится дольше - это бьёт по позициям сайта в поиске.

Когда подходит: имиджевая страница, где эффект важнее скорости. Для карточек товаров и статей - редко оправдано.

Способ 4. Всплывающее видео и видеовиджет

Этот способ решает другую задачу - превратить ролик в заявки.

Видеовиджет - компактная карточка с видео, которая появляется в углу экрана через несколько секунд после входа на страницу. Сначала видео беззвучное: посетитель видит движение и подсказку «Нажмите, чтобы открыть». Один тап - и ролик раскрывается на весь экран со звуком, а поверх видео видна кнопка с вашим предложением.

От привычных попапов и баннеров это отличается тем, что не перекрывает контент: закрытая карточка занимает угол и не мешает читать. А от встроенного плеера - тем, что ролик сам находит посетителя, а не ждёт, пока до него доскроллят.

Какой способ выбрать

1. Показать ролик в статье или на странице «О нас» - плеер с видеохостинга: быстро и бесплатно.
2. Нужен полный контроль над видом и брендом - HTML5-плеер со своим файлом.
3. Первый экран и атмосфера - фоновое видео, но следите за размером файла.
4. Нужны заявки, а не просмотры - видеовиджет.

Как добавить видео на сайт: пошагово

Конкретный код зависит от площадки, но принцип один: вставить фрагмент туда, где должен быть блок.

Тильда. Добавьте на страницу блок T123 (это HTML-блок, в него вставляют код) и поместите внутрь код видео.

WordPress. Поставьте блок «HTML» или виджет «Произвольный HTML» и вставьте код. Для вставки с видеохостинга часто достаточно просто вставить ссылку на видео в блок «Видео».

Свой сайт. Откройте нужный шаблон страницы и вставьте код в том месте, где должно стоять видео.

Виджет в одну строку. У всплывающих видеовиджетов код сводится к одной строке. Её ставят в самом конце кода страницы, перед закрывающим тегом </body>:

<script src="https://skobelkin.ru/video_bar/widget.js?id=ВАШ_ID" async></script>

Слово async в коде означает, что виджет грузится в фоне и не тормозит страницу.

Что учесть, чтобы видео не навредило

1. Вес. Видео - самый тяжёлый элемент страницы. Ставьте poster и preload="metadata", а большой файл отдавайте через CDN. Как отложить загрузку, разобрано в гайде web.dev.
2. Мобильные. Атрибут playsinline обязателен, иначе на iPhone видео развернётся на весь экран при старте.
3. Автозапуск. Со звуком он запрещён в браузерах - только без звука, звук включается по клику.
4. Пропорции. Держите 16:9 и задавайте размеры, чтобы при загрузке страница не «прыгала».
5. Субтитры. Часть людей смотрит без звука, поэтому подписи или текстовые титры не помешают.

Видеовиджет на практике

Пример - Видео-Бар: компактное видео в углу экрана, которое раскрывается в формате Stories. Свёрнутый вид беззвучный и не мешает читать, раскрытый включает звук и показывает кнопку действия. Настройки - задержка появления, показ только на нужных устройствах, скрытие после закрытия - меняются из панели управления виджета, без правки кода.

Виджет отправляет в Яндекс Метрику четыре цели: показ, раскрытие видео, клик по кнопке и просмотр до конца. Так видно, на каком шаге воронки люди отваливаются.

Разработчик виджета приводит такой расчёт для страницы с 1 000 посетителей в день. Виджет увидят около 850 человек, раскроют видео около 120, досмотрят до конца около 65 и нажмут кнопку около 40. Это ориентир для расчёта, а не гарантия: реальные цифры зависят от ролика и предложения. Посмотреть, как это выглядит на живом сайте, можно на skobelkin.ru/wb.

Частые вопросы

Можно ли добавить видео на сайт без программиста? Да. На Тильде, WordPress и других конструкторах видео вставляется копированием кода в HTML-блок. Видеовиджеты ставятся одной строкой.

Видео с YouTube или Rutube - что выбрать? Для аудитории в России надёжнее Rutube и VK Видео: YouTube работает с ограничениями. Если ролик критичен для продаж, надёжнее разместить файл на своём хостинге.

Замедлит ли видео загрузку сайта? Само видео - нет, если стоит poster и отложенная загрузка. Замедляет только автозапуск файла большого размера, поэтому фоновое видео на первом экране стоит применять с осторожностью.

Сколько стоит встроить видео? Вставка с видеохостинга и HTML5-плеер бесплатны - платите только за хостинг сайта. Сервисы всплывающего видео обычно берут подписку.

Нужно просто показать ролик - хватит плеера с видеохостинга. Нужно, чтобы ролик приводил заявки, - ставьте виджет, который сам появляется в углу экрана и ведёт к кнопке. Посмотреть, как это работает, и записаться на подключение можно на skobelkin.ru/video_bar.