如何在网页嵌入的YouTube视频上添加点击消失的覆盖图？

你可以通过HTML+CSS+JavaScript组合实现这个效果，核心思路是用容器把封面图和视频包裹起来，默认只显示封面图，点击封面图后隐藏图片、显示视频并自动播放，具体代码如下：

1. HTML结构 #

先创建一个容器，里面包含封面图和视频元素：

<div class="video-container">
  <img class="video-cover" src="你的封面图地址.jpg" alt="视频封面">
  <video class="video-player" src="你的视频地址.mp4" controls></video>
</div>

2. CSS样式 #

设置容器的定位方式，默认隐藏视频，让封面图铺满容器：

.video-container {
  position: relative;
  width: 640px; /* 可根据需求调整宽度 */
  cursor: pointer;
}

.video-cover {
  width: 100%;
  display: block;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

3. JavaScript交互逻辑 #

给封面图添加点击事件，控制元素的显示隐藏并启动视频播放：

const coverImg = document.querySelector('.video-cover');
const videoPlayer = document.querySelector('.video-player');

coverImg.addEventListener('click', function() {
  // 隐藏封面图
  this.style.display = 'none';
  // 显示视频
  videoPlayer.style.display = 'block';
  // 启动视频播放
  videoPlayer.play().catch(err => {
    console.log('自动播放失败：', err);
    // 若自动播放被浏览器拦截，可提示用户手动点击播放键
  });
});

补充说明 #

• 浏览器的自动播放策略可能限制无交互的自动播放，所以代码里加了catch处理避免报错。如果遇到自动播放失败，用户可以手动点击视频的播放按钮。
• 你可以根据需求调整容器尺寸、封面图和视频地址，也可以给封面图添加播放图标之类的视觉提示，提升用户体验。

内容的提问来源于stack exchange，提问作者İsmail Berberoğlu