同一页面多iframe Vimeo视频封面点击播放功能失效求助

问题根源是原代码使用document.querySelector()只会选取匹配到的第一个元素，导致页面中只有第一组视频封面和iframe能正常工作，其余组完全没绑定事件。

修改后的JavaScript代码 #

// 获取所有视频封面元素
const videoCovers = document.querySelectorAll('.js-iframe-cover');

// 遍历每个封面，为其绑定对应视频的事件
videoCovers.forEach(cover => {
    // 找到当前封面所在容器内的对应iframe
    const iframe = cover.parentElement.querySelector('.js-iframe');
    // 创建当前iframe对应的Vimeo Player实例
    const video = new Vimeo.Player(iframe);

    // 封面点击事件：淡出封面并播放视频
    cover.addEventListener('click', () => {
        cover.style.opacity = '0';
        video.play();
    });

    // 封面淡出动画结束后移除元素
    cover.addEventListener('transitionend', function() {
        this.remove();
    });
});

关键改动说明 #

• 用document.querySelectorAll()替代querySelector()，获取页面中所有的视频封面元素
• 通过cover.parentElement定位到当前封面的父容器，再从中找到对应的iframe，确保每个封面只控制自己对应的视频
• 使用forEach遍历所有封面，为每个封面单独创建Player实例并绑定事件，避免循环变量的作用域问题
• 结合箭头函数和普通函数，保证transitionend事件中this指向当前封面元素

注意事项 #

确保每个iframe的src属性正确填写Vimeo的嵌入地址（例如https://player.vimeo.com/video/123456789），否则Player实例无法正常初始化。

内容的提问来源于stack exchange，提问作者Mathieu Préaud