Вертикальное видео на сайте: как разместить без чёрных полос

Большинство роликов сейчас снимают вертикально: на телефон, для соцсетей, в формате коротких видео. А сайты по привычке рассчитаны на горизонтальный плеер 16:9. Если вставить вертикальный ролик в такой блок, по бокам появятся чёрные полосы, а на компьютере видео займёт полэкрана в высоту и вытолкнет текст вниз.

Разберём, где вертикальное видео на сайте смотрится уместно, как сверстать его без чёрных полос, как вставить вертикальный ролик с видеохостинга и какой формат выбрать, если хочется обойтись без вёрстки.

Когда вертикальное видео лучше горизонтального

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

Горизонтальное видео остаётся лучшим выбором для фона первого экрана на компьютере, для презентаций, интерьеров и съёмки с несколькими людьми в кадре. Подробнее о выборе ориентации при съёмке: как снять видео для сайта на телефон.

Пять мест для вертикального видео на странице

Где	Как выглядит	Подходит для
Рядом с текстом	Две колонки: ролик слева или справа, текст и кнопка рядом	Приветствие, визитка, описание услуги
Лента роликов	Несколько вертикальных карточек в ряд с прокруткой вбок	Отзывы, обзоры товаров, примеры работ
Карточка товара	Ролик среди фотографий товара	Товар в руках и в работе
Угол экрана	Небольшое превью поверх страницы, раскрывается по нажатию	Ролик, который должен работать на всём сайте
Истории	Круглые обложки, внутри полноэкранные слайды	Серии роликов: акции, новинки, отзывы

Чего лучше избегать: вертикальное видео во всю ширину колонки на компьютере. При ширине 800 пикселей ролик 9:16 будет высотой больше 1400 — посетитель увидит только его кусок и будет долго листать до текста.

Как вставить вертикальное видео на сайт: HTML и CSS

Задача вёрстки — задать блоку пропорции 9:16 и ограничить его высоту, чтобы на компьютере он не был гигантским, а на телефоне занимал экран.

<div class="vvideo">
  <video src="/video/review.mp4" poster="/video/review.jpg"
         controls playsinline preload="metadata"></video>
</div>

.vvideo {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.vvideo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Что здесь важно:

aspect-ratio: 9 / 16 резервирует место под ролик заранее, и страница не «прыгает», когда видео загрузится.
max-width и max-height не дают ролику разрастись на широком экране. На телефоне блок займёт ширину экрана, но не выше 80% его высоты.
object-fit: cover заполняет блок целиком без полос: если пропорции ролика чуть отличаются от 9:16, лишнее обрежется по краям. Значение contain, наоборот, покажет кадр целиком, но с полосами.
playsinline нужен, чтобы на iPhone ролик играл внутри страницы, а не открывался на весь экран.

Для раскладки «видео рядом с текстом» поместите блок в сетку из двух колонок, а на узком экране переставьте колонки друг под друга:

.vsplit {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 767px) {
  .vsplit { grid-template-columns: 1fr; }
}

Как убрать чёрные полосы

Полосы появляются, когда пропорции блока и ролика не совпадают: вертикальное видео стоит в горизонтальном плеере или наоборот. Есть три решения.

Подогнать блок под ролик. Тот же aspect-ratio: 9 / 16, что в примере выше. Самый чистый вариант.
Обрезать ролик под блок. object-fit: cover заполнит блок, но обрежет края. Годится, если главное в центре кадра.
Размытый фон. Если блок должен остаться горизонтальным, под роликом ставят ту же заставку или второе видео, увеличенное и размытое. Получается, как в соцсетях, когда вертикальное видео показывают в горизонтальном окне.

.vblur { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.vblur::before {
  content: ""; position: absolute; inset: -20px;
  background: url(/video/review.jpg) center / cover;
  filter: blur(24px); opacity: .7;
}
.vblur video { position: relative; height: 100%; display: block; margin: 0 auto; }

Если полосы «вшиты» в сам файл — например, ролик уже смонтирован в горизонтальный кадр с чёрными краями, — CSS не поможет. Обрежьте видео в редакторе или командой ffmpeg с фильтром crop и загрузите заново.

Вертикальное видео с YouTube, RuTube и VK Видео

Короткие вертикальные ролики с видеохостингов встраиваются тем же тегом <iframe>, что и обычные. Плеер сам не знает, что ролик вертикальный, поэтому пропорции задаёт ваш CSS:

<div class="vvideo">
  <iframe src="https://www.youtube.com/embed/ID_ролика"
          allow="encrypted-media; picture-in-picture" allowfullscreen
          loading="lazy" style="width:100%;height:100%;border:0"></iframe>
</div>

Для YouTube Shorts в адресе плеера используется тот же формат /embed/ID, где ID — часть ссылки на ролик после /shorts/. Код вставки RuTube и VK Видео берите в меню «Поделиться» → «Встроить» и задавайте контейнеру пропорции 9:16 так же. Учтите, что плеер видеохостинга загружает свои скрипты и после просмотра может показать рекомендации. Подробнее о плюсах и минусах: как добавить видео на сайт.

Подготовка файла

Разрешение. Для сайта хватает 720×1280. Исходник 1080×1920 с телефона лучше уменьшить: файл станет в разы легче. Как это сделать, рассказано в статье как сжать видео для сайта.
Главное в центре. В разных местах сайта вертикальный ролик обрезается по-разному: в превью сверху и снизу, в горизонтальном блоке по бокам. Не ставьте текст и логотип у краёв кадра.
Начало без звука. Ролики в ленте и в углу экрана сначала играют беззвучно. Первые секунды должны быть понятны без слов.
Заставка. Сделайте вертикальную картинку для poster из удачного кадра, а не из первого, где вы только тянетесь к телефону.

Вертикальное видео без вёрстки: видеовиджет и Истории

Если править код сайта не хочется или нет доступа к шаблону, вертикальный ролик можно показать готовыми форматами Видвиджета. Они рассчитаны именно на вертикальное видео.

Видеовиджет в углу экрана

Видеовиджет показывает ролик небольшой карточкой 130×180 пикселей поверх страницы. Видео играет без звука, а по нажатию виджет раскрывается до 280 пикселей в ширину и до 500 в высоту — это как раз пропорции 9:16 — и ролик начинается с начала со звуком. Под видео можно поставить кнопку со своей ссылкой: «Записаться», «Выбрать размер», «Написать в мессенджер».

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

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

Истории

Если роликов несколько, подойдут Истории: лента круглых обложек в нужном месте страницы, внутри каждой — слайды с фото или видео и кнопкой. Это удобный способ выложить на сайт серию отзывов, новинки или клипы, уже снятые для соцсетей.

Оба формата подключаются одной строкой кода на любом сайте, в том числе на Tilda. Первые 14 дней доступны все функции, потом один видеовиджет и один виджет Историй остаются бесплатными.

Покажите вертикальное видео без правки вёрстки

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

Попробовать бесплатно Посмотреть тарифы

14 дней все функции, затем бесплатный тариф Free. Карта не нужна.

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

Как вставить вертикальное видео на сайт без чёрных полос?

Задайте блоку с видео пропорции ролика через CSS-свойство aspect-ratio: 9 / 16 и ограничьте его ширину и высоту. Видео внутри растяните на весь блок со свойством object-fit: cover. Если полосы есть в самом файле, обрежьте ролик в редакторе.

Какое разрешение нужно для вертикального видео на сайте?

Достаточно 720×1280 пикселей. Исходник 1080×1920 с телефона для сайта лучше уменьшить и сжать: на экране разницы не будет, а файл станет в разы легче.

Можно ли вставить на сайт YouTube Shorts?

Да, через обычный код плеера с адресом youtube.com/embed/ID, где ID взят из ссылки на Shorts. Контейнеру нужно самому задать пропорции 9:16, иначе плеер покажет ролик с полосами.

Как показать на сайте горизонтальное видео в вертикальном виджете?

Загрузить его можно, но в вертикальной карточке видеовиджета будет видна только центральная часть кадра. Для виджета лучше снимать вертикально или заранее обрезать ролик под 9:16.

Как разместить на сайте несколько вертикальных роликов?

Сверстать ленту карточек с прокруткой вбок или подключить Истории Видвиджета: круглые обложки на странице, внутри слайды с видео и кнопкой. На бесплатном тарифе доступен один виджет Историй.