Изменить видео на свитке ⇐ Jquery

[Anonymous]

Я взял исходный код с этой страницы Codepen. Он меняет изображение на прокрутке, но вместо изображения я хочу изменить видео на прокрутке. < /P>
Вот код, который у меня есть до сих пор. Первое видео играет, но оно не изменится на свитке. Я добавил id = "Mainimage" в тег источника видео, так что это должно работать?
Что я делаю не так?.mouse_scroll {
overflow: visible;
position: relative;
}
.side_sec {
display: flex;
}
.img-links div.text-sec {
text-align: left;
padding: 10px 20px;
border-radius: 10px;
margin: 500px 0px;
background: transparent;
}
.img-links div.active {
border: none;
background: var(--box-bg-color);
}
.featured-img::before {
content: "";
position: absolute;
background-size: 60%;
background-repeat: no-repeat;
background-position: left;
left: 15%;
right: 0px;
top: -50px;
width: 100%;
height: 100%;
z-index: 1;
margin-right: 0px;
}
.featured-img {
position: sticky;
top: 140px;
height: 700px;
}
.featured-img img {
position: absolute;
left: 75px;
top: 35px;
width: 55%;
height: auto;
border-radius: 30px;
}
.side-text {
display: flex;
}
.side-text h3{
color:orange;
}
.side-text p{
color:#000;
}
< /code>









Better writing,
better results
Be perfectly professional, clear, and convincing in a few clicks, not a few hours.

The right text
for the context
Get personalized suggestions based on what you’re writing and who will read it.

Works where
you work
Grammarly works across all the apps and sites you use. No copying, no pasting, no context switching.

Never go out of style
Grammarly understands both your personal style and your brand style guide to help you find your voice.

This is responsible AI
Don’t compromise on security. We never sell your data, provide it for advertising purposes, or allow third parties to use it to train their models.

















< /code>
Javascript
$(document).ready(function () {
// Function to handle mouse wheel events
function handleMouseWheel(ele) {
// Your logic here
console.log("Mouse wheel event detected!");
$('.img-links div.text-sec').removeClass('active');
$(ele).addClass('active');
// Update the main image based on the active div
var newImageSrc = $(ele).data('src');
$('#mainImage').attr('src', newImageSrc);
}
const options = { threshold: 0.4 };
// Set up Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Add scroll event listener when target element is visible
$(window).on('wheel', () => handleMouseWheel(entry.target));
} else {
// Remove scroll event listener when target element is not visible
$(window).off('wheel', () => handleMouseWheel(entry.target));
}
});
}, options);
// Define the target elements you want to observe
const targetElements = $('.img-links div.text-sec');
// Start observing each target element
targetElements.each(function () {observer.observe(this);});
});


Подробнее здесь: https://stackoverflow.com/questions/796 ... -on-scroll