Это автовоспроизведение видео при прокрутке до него и автостоп, если видео на экране нет. Для видео, которое вставляется через тег video, я сделал код, но как его адаптировать под iframe, под видео, которое например вставлено через ютуб?
<div class="wrapper">
<div class="element">
<div class="text">Видео внизу</div>
</div>
<div class="main">
<div class="video">
<iframe src="https://www.youtube.com/embed/xuxWlWkxLDQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="element">
<div class="text">Видео сверху</div>
</div>
</div>
html, body {
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 400;
height: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
.element {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 94rem;
background-color: #323232;
}
.text {
font-size: 2.5rem;
font-weight: 500;
color: #ffffff;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
width: 100%;
height: 62.5rem;
}
.video iframe {
object-fit: cover;
width: 50rem;
height: 31rem;
}
@media (max-width: 1600px) {
html, body {
font-size: 15px;
}
}
@media (max-width: 1300px) {
html, body {
font-size: 14px;
}
}
@media (max-width: 1000px) {
html, body {
font-size: 12px;
}
}
@media (max-width: 800px) {
html, body {
font-size: 9px;
}
}
@media (max-width: 600px) {
html, body {
font-size: 5px;
}
}
const videoObserver = new IntersectionObserver(
([entry]) => {
const video = entry.target;
if (video.currentTime !== 0) {
if (!entry.isIntersecting || entry.intersectionRatio <= 0.2) {
video.pause();
} else {
video.play();
}
}
}, {
threshold: [0.1, 0.8]
}
);
document.querySelectorAll("iframe").forEach((video) => videoObserver.observe(video));