Jay Robertson
Stephen Brown
Как сделать
Видео на фоне
Код для третьего блока
Регистрируемся на Dropbox
У Dropbox есть бесплатная подписка, но если на ваш сайт, где будет встроено данное видео, будет заходить большое количество людей, то Dropbox скажет вам, что мы молодец, все у вас хорошо, но начни-ка ты платить 900 рублей в месяц и пользуйся сколько душе угодно.
За 900 рублей вы получаете все плюшки Dropbox и 2 ТБ облачного хранилища. Я себе взял, так как часто вставляю такие видосы на сайт.
Код для вставки в 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>
Магический код для третьего блока
В коде нужно указать elem шейпа, на который мы будем наводить и elem изображения, которое будет показываться по ховеру.

Изображения будут появляться согласно порядку, который мы указали. Шейп 1, изображение 1 и тд.

Сначала все добавляем в Zero блок. Потом кликаем правой кнопкой мыши на элемент и нажимаем на "Посмотреть код", после чего поднимаемся на 1 строчку выше и ищем значение .tn-elem__3295033571624529917071


<script>
	$(document).ready(function(){
		// Классы шейпов при наведении на которые будет появляться изображение
		var hover_elems = $(".tn-elem__3295033571624529917071, .tn-elem__3295033571624529932825, .tn-elem__3295033571624529935630, .tn-elem__3295033571624529937879");
		// Классы изображений. Именно image.
		var images = ".tn-elem__3295033571624530037497, .tn-elem__3295033571624530044326, .tn-elem__3295033571624530045893, .tn-elem__3295033571624530047868";

		$("body").append("<div class='hover_float_img'></div>");

		var img_exist = 0;
		var img_src;

		var images_arr = images.split(", ");

		hover_elems.each(function(i, item) {
			$(item).hover(function(){
				img_src = $(images_arr[i]).find(".tn-atom__img").attr("src");
				if (img_exist == 0) {
					$(".hover_float_img").append( "<img class='tn-atom__img' src='" + img_src + "'>" );
					img_exist = 1;
				} else {
					$(".hover_float_img .tn-atom__img").attr("src", img_src);
				}

				$(".hover_float_img").css("opacity", "1");
			}, function(){
				$(".hover_float_img").css("opacity", "0");
			})
		})


		$(window).mousemove(function(e){
			var width = $(".hover_float_img").get(0).offsetWidth;
			var height = $(".hover_float_img").get(0).offsetHeight;
			$(".hover_float_img").css("top", e.clientY - height / 2).css("left", e.clientX - width / 2);
		})
	})
</script>
<style>
	.hover_float_img {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		opacity: 1;
		transition: opacity .2s;
	}
	.hover_float_img,
	.hover_float_img img {
		/* Ширина изображения */
		width: 400px;
	}
        /* При ширине экрана меньше чем 1200 пикселей эффект не работает */
	@media screen and (max-width: 1200px) {
	    .hover_float_img {
	        display: none;
	    }
	}
</style>
Скрин, как это все выглядит
В моем случае анимация не всегда работает корректно, так как размер видео большой и иногда подгружается не сразу. Вес моего видео около 50 мб. Я его делал для шаблона и демонстрации возможности такого функционала. Для реально проекта нужно более легкое видео.
Шрифт
Montserrat
ID шаблона
20400831
Как добавить шаблон
Создаем новую страницу на сайте
Скроллим в самый низ
Добавляем нужный id шаблона