База знаний

Как бесплатно вставить видео с автоплеем в Zero Block на Tilda: пошаговая инструкция с Dropbox и ИИ

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

✅ Автоматически включаться при загрузке страницы
✅ Работать на всех устройствах (iPhone, Android, ПК)
✅ Без звука (чтобы не бесить посетителей)
✅ Со скруглением углов/без (кастомный дизайн)
✅ Адаптироваться под экран

Шаг 1. Подготовка видео в Dropbox

1.1. Загрузите видео в Dropbox

Это надежный и бесплатный хостинг для наших целей. Видео должно быть в формате MP4 (оптимально сжатое, чтобы не тормозило).

1.2. Получите прямую ссылку на видео

Когда видео загружено, нажмите "Поделиться" → "Скопировать ссылку". Вы получите что-то вроде:
https://www.dropbox.com/scl/fi/i4c0qmkwwwldxrxjhg3ab/.mp4 rlkey=xrevk870zc2moe88q9hqc7mzn&st=4fpspy6o&dl=0

1.3. Преобразуйте ссылку для прямого доступа

Замените www.dropbox.com на dl.dropboxusercontent.com и измените dl=0 на dl=1. Должно получиться так:
https://dl.dropboxusercontent.com/scl/fi/i4c0qmkwwwldxrxjhg3ab/.mp4?rlkey=xrevk870zc2moe88q9hqc7mzn&st=4fpspy6o&dl=1
Эта ссылка ведет прямо на видеофайл, и браузер сможет его воспроизвести

Инструкция для DeepSeek: Преобразование ссылки Dropbox. Готовый промпт

Привет, DeepSeek! Мне нужно, чтобы ты преобразовал мою ссылку на файл из Dropbox в формат для прямого доступа и воспроизведения в браузере.
Пожалуйста, действуй по следующему алгоритму:
  1. Возьми мою исходную ссылку, которую я тебе пришлю. Она будет начинаться с https://www.dropbox.com/... и заканчиваться на dl=0.
  2. Замени в ссылке домен: вместо www.dropbox.com используй dl.dropboxusercontent.com.
  3. Измени параметр в конце ссылки: замени dl=0 на dl=1. Важно: нужно менять именно параметр, который находится в самом конце ссылки (после &st=...), так как в ссылках Dropbox может быть несколько параметров.
  4. Выдай мне только одну готовую ссылку в таком формате:
  • Сначала напиши фразу: "Вот ваша преобразованная ссылка для прямого доступа к видео:"
  • Затем на новой строке пришли мне готовую ссылку.
  • Убедись, что ссылка кликабельна (активна).
Пример работы:
  • Моя ссылка: https://www.dropbox.com/scl/fi/...пример...&dl=0
  • Твой ответ: "Вот ваша преобразованная ссылка для прямого доступа к видео:"
  • https://dl.dropboxusercontent.com/scl/fi/...пример...&dl=1
Вот моя ссылка, преобразуй её, пожалуйста:
[СЮДА ВСТАВЬТЕ ВАШУ ССЫЛКУ]

Шаг 2. Готовый код для вставки (можно копировать)

<div id="videoInShape" style="width: 100%; height: 100%; overflow: hidden; border-radius: 20px;">
  <video style="object-fit: cover; width: 100%; height: 100%;" 
         preload="auto" 
         playsinline 
         autoplay 
         loop 
         muted>
    <source src="ССЫЛКА_НА_ВАШЕ_ВИДЕО">
  </video>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    function resizeVideoContainer() {
      var container = document.getElementById('videoInShape');
      if (container) {
        var parent = container.parentElement;
        if (parent) {
          if (window.innerWidth <= 768) {
            // Мобильные устройства: точный размер 280x370
            container.style.width = '280px';
            container.style.height = '370px';
            container.style.margin = '0 auto'; // центрирование
          } else {
            // Компьютер: на всю ширину родителя
            container.style.width = '100%';
            container.style.height = '100%';
          }
        }
      }
    }

    resizeVideoContainer();
    window.addEventListener('resize', resizeVideoContainer);
  });
</script>
Не забудьте заменить ССЫЛКА_НА_ВАШЕ_ВИДЕО на подготовленную ссылку из Dropbox

Шаг 3. Вставляем код в Zero Block на Tilda

3.1. Создайте Zero Block

В редакторе Tilda добавьте новый блок → выберите "Zero Block".

3.2. Добавьте HTML-элемент

В левой панели нажмите на иконку "</>" (HTML). На рабочем поле появится прямоугольник.

3.3. Вставьте код

Кликните на прямоугольник, в правой панели найдите поле "HTML-код" и вставьте туда наш код (предварительно заменив ссылку на видео).

3.4. Настройте размеры

Установите ширину и высоту HTML-элемента в 100% (или растяните мышкой на весь блок).

3.5. Мобильная адаптация

Код автоматически определяет ширину экрана. Если < 768px, видео становится ровно 280x370px. Вы можете изменить эти цифры под свой дизайн.

3.6. Скругление 20px

Параметр border-radius: 20px задает скругление самого контейнера. Если хотите другое значение — просто поменяйте цифру.

Бонус: Как ускорить работу с ИИ

Самый простой способ — скопировать эту статью (или любой другой гайд) и отправить в DeepSeek с запросом:
"Прочитай эту инструкцию и напиши готовый код для моего видео. Вот ссылка на Dropbox: [ссылка]. Нужно скругление 20px, на мобильных размер 280x370, на компе на всю ширину."
Нейросеть проанализирует текст и выдаст код, идеально подходящий под вашу задачу. Это экономит часы ручного труда.
Больше полезняшек для веб-дизайнерок на канале
Техничка
Made on
Tilda