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

How to pop up the youtube video player while hovering over the image

本文关键字：youtube 视频 播放器 悬停 图像      更新时间：2023-09-26

我正在设计一个网站，在那里我有一张电影海报，一旦用户悬停在海报上，我就希望它变成YouTube视频播放器（带有电影预告片）。

我需要海报变成YouTube播放器的效果。为了链接youtube视频，我使用iframe:

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

此外，当视频播放时，我希望背景消失，视频在前景中播放，就像http://www.imdb.com/.

我建议的第一件事是使用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
    }
  };
});

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

我建议将mediaelementjs与youtube包装一起使用；它公开了yo-uhtml5方法和属性，就像使用标签

一样
相关文章：