HTML中iframe嵌入Vimeo视频的懒加载图片添加问题

直接给你落地的实现方案，分两步操作：

1. 调整HTML结构 #

把原div上非标准的poster属性换成占位img，同时给iframe做懒加载优化——用data-src暂存视频地址（避免页面加载时就请求iframe资源），默认隐藏iframe：

<div class="video" style="padding: 56.25% 0 0 0; position: relative; cursor: pointer;">
    <!-- 懒加载占位图 -->
    <img 
        src="../../assets/images/banner1.jpg" 
        alt="视频封面"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
        loading="lazy"
    >
    <!-- Vimeo iframe 默认隐藏，用data-src存真实地址 -->
    <iframe
        data-src="https://player.vimeo.com/video/816485409?h=b26fcc260f&loop=1&controls=0&autoplay=1&player_id=0&app_id=58479"
        frameborder="0"
        allow="autoplay; fullscreen; picture-in-picture"
        allowfullscreen
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;"
        title="video1.mp4"
    ></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

2. 添加点击触发播放的JS逻辑 #

给视频容器绑定点击事件，点击后隐藏占位图、显示iframe并加载视频，同时用Vimeo API确保播放生效：

document.querySelectorAll('.video').forEach(container => {
    const coverImg = container.querySelector('img');
    const videoIframe = container.querySelector('iframe');

    container.addEventListener('click', () => {
        // 隐藏封面图
        coverImg.style.display = 'none';
        // 显示iframe并加载视频地址
        videoIframe.style.display = 'block';
        videoIframe.src = videoIframe.dataset.src;

        // 调用Vimeo API触发播放，规避浏览器自动播放限制
        const player = new Vimeo.Player(videoIframe);
        player.play().catch(err => {
            console.log('自动播放失败:', err);
        });
    });
});

可选优化 #

• 若要实现「滚动到视图再加载封面图」，可以把img的src换成data-src，用IntersectionObserver监听元素进入视口后再赋值src。
• 可以给封面图叠加一个居中的播放图标SVG，提升用户交互感知。

内容的提问来源于stack exchange，提问作者Developer SHLIFE