initZoomObserver() {
    if (this._zoomObserver) this._zoomObserver.disconnect();

    const container = document.getElementById('zoom-container');
    const slides = Array.from(document.querySelectorAll('.zoom-slide')); // full feed, photos + videos
    this._activeSlideIndex = -1; // force first sync to always run

    const syncActiveVideo = () => {
        const activeIndex = Math.round(container.scrollTop / container.clientHeight);
        if (activeIndex === this._activeSlideIndex) return;
        this._activeSlideIndex = activeIndex;

        // Always mute/pause every video first. This is the actual fix — a photo
        // slide has no video of its own to "activate", so without this
        // unconditional sweep, whatever video was last playing just kept going
        // in the background while a photo sat on screen.
        document.querySelectorAll('.big-video').forEach(v => {
            if (!v.paused || !v.muted) {
                v.muted = true;
                v.pause();
                v.currentTime = 0;
            }
        });

        // Only THEN check if the slide we landed on is actually a video, and
        // if so, play/unmute that one specific element.
        const activeSlide = slides[activeIndex];
        const activeVideo = activeSlide ? activeSlide.querySelector('.big-video') : null;
        if (activeVideo) {
            activeVideo.muted = !this.soundUnlocked;
            const p = activeVideo.play();
            if (p !== undefined) {
                p.catch(() => { activeVideo.muted = true; activeVideo.play().catch(() => {}); });
            }
        }
    };

    if ('onscrollend' in window) {
        container.onscroll = null;
        container.onscrollend = syncActiveVideo;
    } else {
        container.onscroll = () => {
            clearTimeout(this._scrollSettleTimer);
            this._scrollSettleTimer = setTimeout(syncActiveVideo, 120);
        };
    }

    container.ontouchend = syncActiveVideo;
    syncActiveVideo();
},

initZoomObserver() {
    if (this._zoomObserver) this._zoomObserver.disconnect();

    const container = document.getElementById('zoom-container');
    const slides = Array.from(document.querySelectorAll('.zoom-slide')); // full feed, photos + videos
    this._activeSlideIndex = -1; // force first sync to always run

    const syncActiveVideo = () => {
        const activeIndex = Math.round(container.scrollTop / container.clientHeight);
        if (activeIndex === this._activeSlideIndex) return;
        this._activeSlideIndex = activeIndex;

        // Always mute/pause every video first. This is the actual fix — a photo
        // slide has no video of its own to "activate", so without this
        // unconditional sweep, whatever video was last playing just kept going
        // in the background while a photo sat on screen.
        document.querySelectorAll('.big-video').forEach(v => {
            if (!v.paused || !v.muted) {
                v.muted = true;
                v.pause();
                v.currentTime = 0;
            }
        });

        // Only THEN check if the slide we landed on is actually a video, and
        // if so, play/unmute that one specific element.
        const activeSlide = slides[activeIndex];
        const activeVideo = activeSlide ? activeSlide.querySelector('.big-video') : null;
        if (activeVideo) {
            activeVideo.muted = !this.soundUnlocked;
            const p = activeVideo.play();
            if (p !== undefined) {
                p.catch(() => { activeVideo.muted = true; activeVideo.play().catch(() => {}); });
            }
        }
    };

    if ('onscrollend' in window) {
        container.onscroll = null;
        container.onscrollend = syncActiveVideo;
    } else {
        container.onscroll = () => {
            clearTimeout(this._scrollSettleTimer);
            this._scrollSettleTimer = setTimeout(syncActiveVideo, 120);
        };
    }

    container.ontouchend = syncActiveVideo;
    syncActiveVideo();
},