javascript - 我如何让图像在悬停时显示 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 或者您可以使用显示。这真的取决于你。这是我至少会去的方向。将容器设置为相对位置，将内部元素限制在其自身的范围内，因此绝对位置与容器的底部和顶部“相对”。