Javascript 如何在图像上方悬停时弹出youtube视频播放器

我正在设计一个网站，在那里我有一张电影海报，当用户将鼠标悬停在海报上时，我希望它能切换到YouTube视频播放器（带有电影预告片）

我需要海报变成YouTube播放器的效果。对于链接youtube视频，我使用的是iframe：

 <iframe width="420" height="345"
         src="http://www.youtube.com/embed/XGSy3_Czz8k">
  </iframe>

此外，当视频播放时，我希望背景消失，视频在前景播放，就像视频中的内容一样。

我建议与youtube包装一起使用；

---

它公开了YouTube uhtml5方法和属性，就像使用标签一样

我建议的第一件事是使用YouTube的iframe API

这样，您只能在基本JS事件上创建iframe。例如，在jQuery中：

$(document).ready(function{
  //load YouTube API as indicated above
  //set the id of each poster to the videoId of the trailer
  $('.someClass').mouseenter(this.id, loadPlayer); 
  var loadPlayer = function(id) {
    new YT.Player(id, {
    videoId: id,
    //other settings as needed
    }
  };
});

---

这不是一个复制粘贴工作，所以做一些更多的研究！这个（外部博客，不是我的）对我开始学习点播视频加载非常有帮助。

但这也不能满足要求。视频未播放，背景页变暗。它的工作方式与iframe标记的工作方式相同。您能提供您尝试过的代码吗？我会在iFrame上放置一个透明层，这样悬停事件就可以由您的js进行正确管理，然后相关层上的隐藏/显示效果会使事情正常工作；你做过那样的事吗？[因为，当然，仅使用库不会获得这种效果]，但这也不符合要求。视频未播放，背景页变暗。它的工作方式与iframe标记的工作方式相同。我无法为您编写所有代码。该API文档将告诉您有关播放和暂停事件、自动播放等的信息。至于使背景“变暗”，这是一个单独的问题。您可能需要将全屏

覆盖为

不透明度：0.6

左右。