ethereal,
лучше скопировать код и создать отдельную страницу для просмотра
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
width: 4000px;
height: 2000px;
}
.container {
position: relative;
width: 1000px;
height: auto;
border: 1px solid gray;
margin: 0 auto;
}
.container > div {
margin: 10px;
display: inline-block;
background: gray;
}
.site--image---video video::-webkit-media-controls ,.jquery-background-video-pauseplay {
display:none !important;
}
.site--image---video {
position: relative;
overflow: visible;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.site--video {
position: absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
-o-object-fit: contain;
object-fit: contain;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
.site--image---video img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 800ms ease;
transition-delay: 0ms;
z-index: 10;
}
.show.site--image---video img {
opacity: 0;
transition: all 800ms ease;
transition-delay: 1200ms;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const lazyAnimate = divs => {
divs.forEach(el => {
let isInView = el.intersectionRatio > .8;
let div = el.target;
let site = div.querySelector('.site--image---video');
site.classList.toggle('show', isInView);
let video = div.querySelector('.site--video');
if (isInView) {
video.play();
} else {
video.pause();
video.currentTime = 0;
}
});
}
let observer = new IntersectionObserver(lazyAnimate, {
rootMargin: "0px",
threshold: [.7, .9] //настроить видимость
});
let container = document.querySelectorAll('.container > div');
container.forEach(div => observer.observe(div))
});
</script>
</head>
<body>
<div class="container">
<div style="width: 980px; height: 560px;">
<div class="site--image---video">
<img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
<video class="site--video" controls muted loop>
<source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</div>
<div style="width: 475px; height: 360px;">
<div class="site--image---video">
<img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
<video class="site--video" controls muted loop>
<source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</div>
<div style="width: 475px; height: 360px;">
<div class="site--image---video">
<img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
<video class="site--video" controls muted loop>
<source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</div>
</div>
</body>
</html>