要实现图像在悬停状态下显示YouTube视频,可以通过以下步骤来完成:
<img src="image.jpg" alt="Image" id="image">
<div id="video-container"></div>
#image {
width: 200px;
height: 200px;
}
#video-container {
width: 560px;
height: 315px;
position: absolute;
top: 0;
left: 0;
display: none;
}
var image = document.getElementById('image');
var videoContainer = document.getElementById('video-container');
image.addEventListener('mouseover', function() {
videoContainer.style.display = 'block';
});
image.addEventListener('mouseout', function() {
videoContainer.style.display = 'none';
});
var videoContainer = document.getElementById('video-container');
videoContainer.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>';
请注意,上述代码中的VIDEO_ID应替换为您要嵌入的YouTube视频的实际视频ID。
这样,当鼠标悬停在图像上时,视频容器将显示出来,播放嵌入的YouTube视频。当鼠标移出图像时,视频容器将隐藏。
领取专属 10元无门槛券
手把手带您无忧上云