图片轮播嵌入YouTube视频异常：hover视频缩略图主视图显示错误修复

错误根源 #

• 主轮播区域用的是<img id="featured">标签，它只能加载图片资源，完全无法解析YouTube的视频链接。
• 你的JS逻辑不管hover的是图片缩略图还是iframe视频缩略图，都直接把this.src赋值给img的src属性。iframe的src是YouTube视频地址，img标签识别不了这种资源，所以必然显示破碎图。

修复步骤 #

1. 重构HTML结构 #

把原来单独的<img id="featured">改成一个容器，同时容纳图片和视频iframe（默认隐藏视频）：

<div id="featured-container">
  <img id="featured-img" src="images/sample1.jpg">
  <iframe id="featured-video" width="500" height="600" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:none; border:2px solid black; max-width:500px; max-height:600px;"></iframe>
</div>

替换原代码中单独的<img id=featured src="images/sample1.jpg">。

另外给视频缩略图的iframe加个自定义属性data-video-src存储原始视频链接（避免直接用iframe的src，因为iframe加载后src可能会被追加额外参数）：

<iframe class="thumbnail" data-video-src="videolink" width="560" height="315" src="videolink" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

2. 更新JavaScript逻辑 #

判断hover元素的类型，分别处理图片和视频的切换：

let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('active')
const featuredImg = document.getElementById('featured-img')
const featuredVideo = document.getElementById('featured-video')

for (var i=0; i < thumbnails.length; i++){
    thumbnails[i].addEventListener('mouseover', function(){
        // 移除之前的active状态
        if (activeImages.length > 0){
            activeImages[0].classList.remove('active')
        }
        this.classList.add('active')

        // 根据元素类型切换显示内容
        if (this.tagName === 'IMG') {
            featuredImg.style.display = 'block'
            featuredVideo.style.display = 'none'
            featuredImg.src = this.src
        } else if (this.tagName === 'IFRAME') {
            featuredImg.style.display = 'none'
            featuredVideo.style.display = 'block'
            featuredVideo.src = this.dataset.videoSrc
        }
    })
}

3. 统一样式（可选） #

把视频和图片的公共样式写到CSS里，替代内联样式：

#featured-container img, #featured-container iframe {
    max-width: 500px;
    max-height: 600px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid black;
}

这样修改后，hover图片缩略图时显示图片，hover视频缩略图时切换显示视频，就不会再出现破碎图的问题了。

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