# Видео на сайте: как вставить и не замедлить загрузку

29 октября 2026 г. · 3 мин чтения · Студия AETHER · https://aether-studio.ru/blog/video-na-sajte

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

## Где видео уместно

- **Процесс и результат** — ремонт, производство, процедура: то, что на фото выглядит неубедительно.
- **Знакомство** — врач, автор курса, руководитель за минуту-две рассказывают о себе. Живой человек вызывает больше доверия, чем текст.
- **Отзывы клиентов** — самый убедительный их формат; как собрать отзывы, разобрано в статье [«Отзывы на сайте»](https://aether-studio.ru/blog/otzyvy-na-sajte).
- **Инструкции** — как пользоваться товаром, как проехать.
- **Атмосфера** — ресторан, отель, студия: короткое беззвучное видео на фоне.

Видео «чтобы было» лучше не ставить: если ролик никто не досмотрит, он только замедлит страницу.

## Два способа вставить видео

| Способ | Как работает | Когда подходит |
| --- | --- | --- |
| Через видеосервис | Ролик загружают в VK Видео или на Rutube и вставляют на сайт их плеер | Длинные ролики со звуком: интервью, обзоры, инструкции |
| Своим файлом | Файл лежит на хостинге сайта и играет во встроенном плеере браузера | Короткие беззвучные ролики, фон первого экрана |

YouTube тоже позволяет вставить плеер на сайт, но в России он открывается не у всех и медленно. Для российских посетителей надёжнее VK Видео или Rutube.

## Как вставить ролик с видеосервиса

1. Загрузите ролик в VK Видео или на Rutube.
2. В меню «Поделиться» у ролика найдите код для вставки на сайт.
3. Вставьте код в HTML-блок на странице — в конструкторах и системах управления сайтом для этого есть специальный блок. Или передайте код разработчику.
4. Попросите, чтобы плеер загружался только по нажатию: сначала на странице видна картинка-обложка с кнопкой воспроизведения, а сам плеер подгружается, когда человек на неё нажал. Так чужой плеер не замедляет загрузку страницы.

## Видео на первом экране

Фоновое видео на первом экране выглядит эффектно, но требует аккуратности:

- **Без звука и коротко** — 10–20 секунд по кругу. Ролик со звуком браузеры обычно сами не запускают.
- **Лёгкое** — сотни килобайт или пара мегабайт, а не десятки.
- **С обложкой.** Пока видео грузится, видна картинка из первого кадра, и первый экран не пустой. В режиме энергосбережения iPhone может не запустить видео вовсе — тогда обложка остаётся главным изображением.
- **Текст поверх читается на любом кадре** — для этого видео затемняют.
- **На телефоне** — облегчённая версия ролика или просто картинка.

## Как сделать видео лёгким

- **Формат MP4** — его показывают все браузеры.
- **Разрешение по задаче**: для фона на компьютере хватает 1920 пикселей по ширине, для телефона — 720.
- **Без звуковой дорожки** у фонового видео — она только добавляет вес.
- **Сжатие** — в бесплатных программах вроде HandBrake: можно выбрать качество и сразу увидеть, сколько весит файл.
- **Загрузка по мере надобности**: ролик ниже по странице начинает грузиться, когда до него долистали.

Как проверить, что сайт не стал медленнее, разобрано в статье [«Скорость загрузки сайта»](https://aether-studio.ru/blog/skorost-zagruzki-sajta).

## Частые ошибки

- **Видео на 30–50 мегабайт** на первом экране: с телефона сайт открывается долго.
- **Автозапуск со звуком** — браузеры его блокируют, а там, где он сработал, люди закрывают вкладку.
- **Главное — только в видео.** Поисковик ролик не посмотрит, а многие посетители его не включат. Дублируйте важное текстом: цены, сроки, адрес.
- **Плеер YouTube** для российской аудитории.
- **Несколько роликов играют одновременно** — страница тормозит и отвлекает.

## Примеры

Видео на первом экране — в двух концептах студии: [Vibrant Wellness](https://aether-studio.ru/works/wellness) — лендинг центра восстановления нервной системы с видео во весь первый экран, и [SkyElite](https://aether-studio.ru/works/skyelite) — лендинг брокера деловой авиации с видео бизнес-джета. Разбор обоих — в статье [«Примеры лендингов с разбором»](https://aether-studio.ru/blog/primery-lendingov).

## Как это делаем мы

Анимации и 3D в лендинге мы используем там, где они работают на задачу, а вёрстку делаем на коде, чтобы страница быстро загружалась на телефоне и медленном интернете.

**Услуга «Лендинг»:** от 4 рабочих дней, от 30 000 ₽, обычно 30 000–70 000 ₽. Подробнее: https://aether-studio.ru/services/landing

**Обсудим ваш сайт.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.