Question 46042 in CSS Question posted in
Some basic documentation can be found here.

How to center one video over another – CSS

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:
(https://i.stack.imgur.com/50Iwk.jpg)
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:
How to center one image over another

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 what’s happening instead:
(https://i.stack.imgur.com/6nHtF.jpg)

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

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

Tags:

2

Answers


  1. 0

    First of all you can not make a video with transparent background there will always a background. If you want to do so you may have to use a .gif format for the video.

    Secondly apply the following style in your code:

    .frame{
  position: relative;
}
  
#foreground-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
    Login or Signup to reply.
  2. 0

    In the HTML, I would add a div called "foreground"

    <div class="frame">
    <video id = "background-video" autoplay loop muted>
      <source src= "screwvideo.mp4" type = "video/mp4">
    </video>
    
    <div class="foreground">
      <video id = "foreground-video" autoplay loop muted>
        <source src= "YEEEE.mp4" type = "video/mp4">
      </video>
    </div>
</div>

    Then, I would style the "frame" and "foreground" classes as such below, instead of the videos themselves. In the "foreground" div you can also add the home and about buttons.

    .frame{
  position: relative;
  width: 1800px;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foreground {
  position: absolute;
  width: 500px;
  z-index: 1;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search