Видео · Прямые ссылки

Как вставить своё видео на сайт по прямой ссылке

Время чтения ~5 минут · видеоурок, обзор или ролик через тег video

Если нужно показать своё видео прямо на странице — урок, обзор товара, ролик о компании — и не хочется тащить его через YouTube с их интерфейсом и «похожими видео», есть способ проще: тег <video> и прямая ссылка на файл mp4. Разберём готовый код и важные нюансы.

Если вам нужно видео в фон секции (без кнопок, на весь экран, как обложка) — это отдельная задача со своими тонкостями, про неё есть отдельная статья про фоновое видео на Tilda. Здесь речь про обычный плеер, который посетитель запускает сам.

Когда свой плеер лучше YouTube

Нет чужого брендинга и рекомендаций. Никаких «смотреть на YouTube» и роликов конкурентов в конце.
Полный контроль вида. Плеер можно оформить под дизайн сайта.
Подходит для коротких роликов. Заставка, обзор, демонстрация — то, что не нужно «хостить» как полноценный видеоканал.

Для длинных видео и большого трафика YouTube всё же выгоднее по нагрузке. А вот для короткого ролика на странице свой файл — чище и аккуратнее.

Шаг 1. Получите прямую ссылку на mp4

Тегу <video> нужен прямой адрес самого файла, а не ссылка на страницу диска. Загрузите mp4 в LF Drive и скопируйте прямую ссылку вида https://lfdrive.ru/f/КОД.

Важно для видео: хостинг должен поддерживать перемотку (запросы по диапазону, range-requests). Без этого видео не перематывается и иногда вообще не запускается. LF Drive это поддерживает, поэтому плеер ведёт себя как надо.

Шаг 2. Вставьте код в Tilda

Добавьте блок «Другое» → «HTML-код» (T123) и вставьте:

<video controls width="100%" preload="metadata">
  <source src="https://lfdrive.ru/f/ВАШ_КОД" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

Замените ВАШ_КОД на код из ссылки. controls показывает кнопки плеера, preload="metadata" подгружает только длительность, а не всё видео сразу — страница грузится быстрее.

Опубликуйте — на странице появится рабочий плеер с вашим видео.

Если нужен автоплей

Браузеры разрешают автозапуск видео только без звука. Чтобы видео стартовало само, добавьте атрибуты autoplay muted playsinline loop:

<video autoplay muted playsinline loop width="100%">
  <source src="https://lfdrive.ru/f/ВАШ_КОД" type="video/mp4">
</video>

Со звуком автозапуск не сработает — это защита браузеров от назойливых сайтов, отключить нельзя.

Где хранить видео

Чтобы видео стабильно открывалось и перематывалось — держите mp4 в LF Drive. Загрузили — получили прямую ссылку с поддержкой перемотки для тега <video>. Есть бесплатный тариф, чтобы попробовать.

Попробовать LF Drive

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

Видео не перематывается — в чём дело?

Скорее всего хостинг не поддерживает запросы по диапазону (range-requests). Без них браузер не может «прыгнуть» в середину файла. Нужен хостинг, который умеет отдавать видео по частям.

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

mp4 с кодеком H.264 — он воспроизводится во всех браузерах. Для веба это самый совместимый вариант.

Чем это отличается от фонового видео?

Фоновое видео идёт без кнопок, на весь экран, как обложка секции, и обычно зацикленное без звука. Здесь же — обычный плеер, который посетитель запускает сам. Про фон есть отдельная статья.