C小陈童鞋 2024-04-16 13:06 采纳率: 33.3%
浏览 10

主要效果：在视屏播放网站，如何让div悬浮在全频的视频播放器之上

主要效果：在视屏播放网站，如何让div悬浮在全频的视频播放器之上。

细节描述：视频播放器全屏幕的情况下，id=show的div依然可以覆盖在视频只上

简要：设置z-index是没有效果的，所以不要回答这块了

技术：html+css+js


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #show {
            width: 30vw;
            height: 30vh;
            background-color: red;
            position: absolute;
            z-index: 2147483647;
        }
    </style>
</head>
<body>
    <video src='https://www.runoob.com/try/demo_source/movie.mp4' controls></video>
    <div id='show'></div>
    
    <script>

    </script>
</body>
</html>
  • 写回答

5条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-04-16 13:06
    关注

    引自免费微信小程序：皆我百晓生

    为了实现这个需求，你需要确保#show div的父元素具有较高的z-index值。在这种情况下，你可以将#show的父元素设置为body，并给它一个非常高的z-index。这里是一个修改后的HTML和CSS代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            overflow: hidden; /* 防止滚动条干扰 */
            position: relative;
            z-index: 2147483647;
        }

        #show {
            width: 30vw;
            height: 30vh;
            background-color: red;
            position: fixed; /* 使用fixed而不是absolute */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 居中显示 */
        }

        video {
            object-fit: cover; /* 让视频充满容器 */
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
        }
    </style>
</head>
<body>
    <video src='https://www.runoob.com/try/demo_source/movie.mp4' controls></video>
    <div id='show'></div>
    
    <script>
        // 如果需要在页面加载完成后全屏视频，可以添加以下JavaScript代码
        document.addEventListener('DOMContentLoaded', function () {
            const video = document.querySelector('video');
            video.requestFullscreen();
        });
    </script>
</body>
</html>

    在这个例子中，我做了以下更改：

    1. 将#show的position属性从absolute更改为fixed，这样它可以相对于浏览器窗口定位。
    2. 添加top: 50%; left: 50%; transform: translate(-50%, -50%)使#show居中显示。
    3. 给body设置了overflow: hidden防止滚动条影响布局。
    4. 设置video的object-fit: cover使其填充整个容器。
    5. 将video的position设置为absolute，并将其z-index设为1，以便于#show层叠在其上。
    6. 添加了一个JavaScript事件监听器，在页面加载完成时请求视频全屏。这一步不是必需的，但根据你的描述，似乎你希望视频一开始就全屏。
    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 4月16日