如何实现背景视频上居中叠加前景视频（响应式适配）

问题需求 #

在落地页设置背景视频，上方居中放置作为logo的前景视频，要求：

• 前景视频始终以背景视频的中心为基准居中，而非页面中心
• 响应式布局下保持该居中关系
• 当前基于图片叠加方案转换的代码未实现视频叠加，效果不符合预期

原始代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Overlaying and centering a video under another video</title>
        <style>

            .frame{
                display: flex;
                align-items: center;
                justify-content: center;
            }

            #background-video {
                width: 1800px;
                z-index: -1;
    }
  
            #foreground-video {
                width: 500px;
                z-index: 1;
    }
        </style>
    </head>
    <body>
        <div class="frame">
            <video id = "background-video" autoplay loop muted>
                <source src= "screwvideo.mp4" type = "video/mp4">
              </video>
            
            <video id = "foreground-video" autoplay loop muted>
                <source src= "YEEEE.mp4" type = "video/mp4">
              </video>
        </div>
    </body>
</html>

解决方案 #

问题核心是未通过定位实现视频叠加，flex布局会让两个视频并排排列而非叠加。修改要点如下：

• 给容器.frame设置相对定位，作为绝对定位元素的参考基准
• 背景视频设置宽度100%以适配响应式，同时保持比例自适应
• 前景视频设置绝对定位，通过top: 50%; left: 50%; transform: translate(-50%, -50%)实现以背景视频为中心的居中
• 保留z-index层级确保前景视频在上方

修改后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Overlaying and centering a video over another video</title>
    <style>
        .frame {
            position: relative;
            width: 100%;
            max-width: 1800px; /* 限制背景视频最大宽度，可按需调整 */
            margin: 0 auto; /* 容器整体居中，可选 */
        }

        #background-video {
            width: 100%;
            height: auto;
            display: block;
            z-index: 1;
        }

        #foreground-video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            max-width: 80%; /* 小屏自动缩小，适配响应式 */
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="frame">
        <video id="background-video" autoplay loop muted>
            <source src="screwvideo.mp4" type="video/mp4">
        </video>
        
        <video id="foreground-video" autoplay loop muted>
            <source src="YEEEE.mp4" type="video/mp4">
        </video>
    </div>
</body>
</html>

关键说明 #

1. 容器相对定位：.frame设置position: relative，让内部绝对定位的前景视频以该容器（即背景视频的父容器）为参考，确保居中基准是背景视频而非页面
2. 背景视频响应式：width: 100%让背景视频随容器宽度自适应，max-width限制最大尺寸避免过度拉伸
3. 前景视频居中逻辑：top:50%;left:50%将视频左上角移到容器中心，transform: translate(-50%,-50%)再将视频自身向左向上偏移一半尺寸，实现完美居中
4. 层级控制：z-index确保前景视频在背景视频上方，数值无需过大，只要前景大于背景即可

内容的提问来源于stack exchange，提问作者Joshua Guox