Сайты
Контакты
Трансформация
ESG
Маркетинг
Обучение
Контакты
Позвонить
(C) 2023 Digital Future
Wadi Rum is an hour's drive from Petra,
on the Desert Highway lies Wadi Rum, a lost world.
LET'S GO!
Blog
Guide
Weather
Night
The main attraction of Jordan is Petra - the city of the dead
EN
RU
Как сделать
Эффект размытия
1. В Zero-блоке добавляем шейп и делаем его прозрачным на 20%
2. Добавляем код, который я указал ниже
3. Находим ID нашего шейпа и заменяем в коде

<style>

.tn-elem[data-elem-id="1618131560285"]{

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

}

</style>
Как найти ID шейпа
1. Правой кнопкой мыши и "Посмотреть код"
2. Смотрим раздел Styles
3. Копируем ID шейпа
4. Вставляем в код
Регистрируемся на Dropbox
У Dropbox есть бесплатная подписка, но если на ваш сайт, где будет встроено данное видео, будет заходить большое количество людей, то Dropbox скажет вам, что мы молодец, все у вас хорошо, но начни-ка ты платить 900 рублей в месяц и пользуйся сколько душе угодно.
За 900 рублей вы получаете все плюшки Dropbox и 2 ТБ облачного хранилища. Я себе взял, так как часто вставляю такие видосы на сайт.
Регистрация на Dropbox 
Код для вставки в Zero-блок
Есть 2 формата вставки. На фон и просто в нужное нам место с нужным размером.
В обоих форматах вставка кода осуществляется одинаково, за исключением того, что для фона мы растягиваем наш HTML фрейм на 100% высоты и ширины страницы, а во втором только на нужную нам область.
Код для вставки видео на фон

<div id="videoBackground">
  <video style="object-fit: cover; background-size: cover; width: 100%; height: 100%;" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0" type="video/mp4">
  </video>
</div>

<script>
$(document).ready(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});
</script>
Код для вставки видео в нужное место

<div id="videoCover">
  <video style="object-fit: cover; background-size: cover; width: 56%; height: 59%; border-radius: 8px;" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0" type="video/mp4">
  </video>
</div>

<script>
$(document).ready(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoCover")
    .width(width)
    .height(height);
});

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoCover")
    .width(width)
    .height(height);
});
</script>

<style>
#videoCover video, div#videoCover {
    width: 100%!important;
    height: auto!important;
}
</style>
Поделиться видео в Dropbox
Тут вопросов возникнуть не должно.

1. Добавляем видео
2. Жмем правой кнопкой мыши и жмем "Поделиться"
3. В самом низу открытого окошка кликаем на "Создать ссылку"
Меняем ссылку и вставляем в код
Dropbox выдает нам ссылку:
 https://www.dropbox.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0

Мы меняем на:
https://dl.dropboxusercontent.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0
ID шаблона
18722903
Как добавить шаблон
Создаем новую страницу на сайте
Скроллим в самый низ
Добавляем нужный id шаблона