CSS how do you center a video in relation to another video?

Get Help CSS
1

I want to have a background video as part of my landing page, with a centered logo (which is another video) on top of that video. Essentially, when it comes to responsiveness, I want whatever the center of the background image is to be the center of foreground photo, not the center of the page itself.

Sample image I made in photoshop:

Sampleimage
Sampleimage2019×2019 417 KB

So essentially, whenever the page shrinks/expands, the middle logo and buttons are adjusted to the center of that background image.

I’ve been trying to figure out what kind of parent-child approach to take. I used this specific forum to form a basis of what I want:

That specific forum dealt with photos and not videos but I figured I could translate the photo code as video and figure my way through.

I thought I had it down when I started programming it, but they are not overlaying whatsoever and I’m so confused as to what to do.

This is the code I started with, I know this is absolutely wrong but I’m not entirely sure what’s wrong:

       <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>

Any sort of insight would be greatly appreciated because I tried searching up tutorials but their doesn’t seem to be any in this particular problem.

2

2023-03-14 (3)
2023-03-14 (3)1920×1127 84.9 KB

This is what I’m getting instead

3

To center a video in relation to another video, you can use the following CSS code:

video { position: relative; left: 50%; transform: translateX(-50%); }

4

That is incorrect.
Both videos are siblings. So the parent element of both videos would have to be positioned relative. The centered video would need to be position: absolute; and then translated – in both directions:

.frame { position: relative; }
#foreground-video {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%); 
}