Копируем код ниже и вставляем его в HTML блок в Zero Block
Теперь меняем мою ссылку в <source src= на вашу прямую ссылку на видео из шага под номером 7
<style>
/* Загрузка видео на Tilda через сервисы GitHub & Githack */
/* Основные стили для видео */
.page__video {
width: 100%; /* Видео будет занимать всю ширину экрана */
object-fit: cover; /* Видео будет обрезаться по размеру, чтобы заполнить контейнер без искажений */
}
/* Медиазапрос для экранов шириной от 320px */
@media screen and (min-width: 320px) {
.page__video {
height: 100%; /* Высота видео 100% от высоты экрана для небольших экранов */
}
}
/* Медиазапрос для экранов шириной от 340px */
@media screen and (min-width: 340px) {
.page__video {
height: 100%; /* Высота видео 100% от высоты экрана для экранов 340px и больше */
}
}
/* Медиазапрос для экранов шириной от 420px */
@media screen and (min-width: 420px) {
.page__video {
height: 100%; /* Высота видео 100% от высоты экрана для экранов 420px и больше */
}
}
/* Медиазапрос для экранов шириной от 1200px */
@media screen and (min-width: 1200px) {
.page__video {
height: 100%; /* Высота видео 100% от высоты экрана для больших экранов 1200px и больше */
/* Можно изменить значение height в зависимости от того, как вы хотите, чтобы видео отображалось на больших экранах */
}
}
</style>
<!-- Видеоплеер -->
<video class="page__video" preload="auto" playsinline autoplay loop muted>
<!-- Ссылка на видеофайл. Здесь подставляется ссылка через raw.githack -->
<source src="https://rawcdn.githack.com/Orangangg/test-video/34436250104d9f8834ffc42ce8b01eddf85c381a/vecteezy_dynamic-3d-spheres-balls-bouncing-together-animation_18985335.mp4" type="video/mp4">
</video>
Но лучше скопировать код вручную, так как после копирования через кнопку он вставится одной строкой в HTML-блок(((((
Как мы помним, вставляем ссылку из кода под №2, но для теста можете просто вставить код и проверить работоспособность