<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>

<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>