咨询：鼠标悬停左右分区时替换背景为不同YouTube视频的实现

嘿，这个需求完全可以实现的！别着急，我帮你理清楚具体怎么做～

核心思路很清晰：给左右两个分区绑定鼠标悬停事件，触发时加载对应YouTube视频作为背景，离开时还原初始背景色。下面分步骤拆解：

一、调整HTML结构 #

首先给左右分区加上视频ID标识，同时准备一个全局容器用来嵌入YouTube视频（复用一个容器比每个分区单独放更高效）：

<div class="container">
  <!-- 视频背景容器，默认隐藏 -->
  <div class="video-bg" id="videoBg">
    <iframe id="youtubePlayer" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  
  <!-- 左右分区，用data-video存储对应YouTube视频ID -->
  <div class="split left" data-video="你的左侧视频ID">
    <!-- 左侧区域内容 -->
  </div>
  <div class="split right" data-video="你的右侧视频ID">
    <!-- 右侧区域内容 -->
  </div>
</div>

二、设置CSS样式 #

要保证视频容器全屏覆盖、默认隐藏，同时让左右分区的内容始终在视频上方：

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

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

.split {
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
  z-index: 1; /* 确保内容不会被视频遮挡 */
}

.split.left {
  background-color: orange;
}

.split.right {
  background-color: red;
}

三、编写JavaScript逻辑 #

这里要用到YouTube的IFrame API来控制视频的加载、播放和切换：

1. 先加载API脚本：

<script src="https://www.youtube.com/iframe_api"></script>

2. 然后写核心交互逻辑：

let player;

// 初始化YouTube播放器
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtubePlayer', {
    events: {
      'onReady': bindHoverEvents
    }
  });
}

// 播放器就绪后绑定悬停事件
function bindHoverEvents() {
  const splits = document.querySelectorAll('.split');
  splits.forEach(split => {
    // 鼠标悬停：加载并播放对应视频
    split.addEventListener('mouseenter', () => {
      const videoId = split.dataset.video;
      player.loadVideoById(videoId);
      document.getElementById('videoBg').style.display = 'block';
      player.mute(); // 背景视频建议静音
    });
    
    // 鼠标离开：停止视频并隐藏容器，还原背景色
    split.addEventListener('mouseleave', () => {
      player.stopVideo();
      document.getElementById('videoBg').style.display = 'none';
    });
  });
}

四、关键注意事项 #

• 替换代码里的你的左侧视频ID和你的右侧视频ID：比如视频URL是https://www.youtube.com/watch?v=abc123，ID就是abc123。
• 确保视频允许嵌入：在YouTube视频的设置里，开启「嵌入」权限。
• 如需循环播放：初始化播放器时添加playerVars: { loop: 1, playlist: 视频ID }（playlist值要和视频ID一致才能生效）。
• 测试建议用服务器环境：比如本地用Live Server插件，避免浏览器限制本地文件的跨域请求。

这样就能实现你想要的效果啦：悬停左侧橙色区域时播放指定视频当背景，悬停右侧红色区域切换到另一个视频，离开时还原初始背景。

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