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

报告相同问题?

问题事件

  • 创建了问题 4月16日