Youtube cards list horizontal mouse scrolling

World! I’m trying to create a horizontal list of youtube video (embed code) cards, which is supposed to be scrollable horizontaly. I’ve found here on stackoverflow some code examples which work when you try to scroll list of divs, but it doesn’t word for youtube cards

What i’ve tried:
JS:

 export function useHorizontalScroll() {
    const elRef = useRef();

    useEffect(() => {
        const el = elRef.current;

        if (el) {
            const onWheel = e => {
                if (e.deltaY === 0) return;
                e.preventDefault();
                el.scrollBy({
                    left: e.deltaY < 0 ? -800 : 800,
                    behavior: "smooth"
                });
            };
            
            el.addEventListener("wheel", onWheel);

            return () => el.removeEventListener("wheel", onWheel);
        }
    }, []);

    return elRef;
}

const Component = () => {
const scrollRef = useHorizontalScroll();

return (<>
<div className="video-container" ref={scrollRef}>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=jPdhWK5lCy4XWCuW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=jPdhWK5lCy4XWCuW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=jPdhWK5lCy4XWCuW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<>);

This just doesn’t work when mouse is over youtube fragment, but it does when mouse is over “video-container” block.
I’ve tried to add event listeners to children of “el” in useHorizontalScroll, right before return, but it didn’t help me
What should i try? Thanks!