I am designing a landing page and I want to incorporate a background video with a centrally aligned logo on top of the video. My goal is for the center of the logo to always align with the center of the background image, regardless of how the page responds to different screen sizes.
Here is a sample image I created in Photoshop to illustrate my idea: (https://i.sstatic.net/50Iwk.jpg) Essentially, as the page adjusts in size, I want the central logo and buttons to remain centered over the background image.
I have been exploring different parent-child approaches to achieve this effect. A forum discussion I found was helpful in guiding me towards the right direction: How to center one image over another
While the forum discussed images, I attempted to apply similar concepts to videos. However, I am encountering difficulties with overlaying the videos as intended. Here is a representation of the current issue: (https://i.sstatic.net/6nHtF.jpg)
The code snippet I started with is clearly incorrect, but I am unsure of where the mistake lies:
<!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>
Any advice or guidance on solving this issue would be highly appreciated, as I have struggled to find specific resources addressing this unique problem.