在悬停时如何让图像显示YouTube视频

Question

在我的网站上我有一个youtube视频，其缩略图看起来不太好，所以我想用图片替换它。我还没有找到任何方法在谷歌这样做，所以我想有一个图像，当用户将鼠标悬停在它上面时，会显示指定的YouTube视频。当该视频显示时，用户可以单击播放，然后在播放视频时图像不会重新出现。我目前正在使用php / cakephp，html，css和javascript。

反正我能做到吗？目前我正在使用旋转木马隐藏丑陋的缩略图，但它看起来并不是最大的，因为当更大的YouTube视频没有显示时它会留下阴影。

Answer 1

如果您需要更改youtube缩略图https://www.youtube.com/watch?v=oYphhwCatLE，但如果需要更改其他视频，则从该点开始设置另一个div以占用不透明度变为0的相同位置一旦悬停或反之为止。所以把它放在代码中

<div id="container" style="position: relative; width: 100%(or whatever)">
     <video style="opacity: 0; z-index: 10;" width="320" height="200">
         <source whatever >
     </video>
     <div style="position: absolute; top:0; width: 320px; height: 200px;">//or could be an image
     </div>
</div>

在设置视频后：将鼠标悬停至不透明度0，或者您可以使用显示。它真的取决于你。这是我至少要进入的方向。将容器设置为相对位置，将内部元素限制在自身的限制内，因此绝对位置是相对的＆＃34;到容器的底部和顶部。