Question 202173 in Html Question posted in
Some basic documentation can be found here.

Html – Positioning video in the middle of the background image

I have a section with 2 div. In left div there is one heading and button & in another div there in one video. Now I have a background image for the video, which I tried to add through CSS in the wrapper class, but the dimensions of the background image are giving me trouble. I want to add the video in the middle of the background image. Could you help me this please?

    .container {
    width: 100%;
    margin-top: 20px;
  }

  .paragrah-desktop {
    display: flex;
  }
  .wrapper {    
    border: 2px solid black;
    background:  url(/static/imgs/bg_video.png); 
    //Dimension is 1920*1080
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;      
  }

  video {
    position: absolute;
    width: 80%;
    
    border: 2px solid #7cd959;
  }
    <section class="container" id="header">
            <div class="paragrah-desktop">
                <div class="subheader">
                    <h1 class="desktop-title">UPGRADE ALERTS</b></h1>
                    <button type="button" class="btn" data-toggle="modal" data-target="#exampleModal">Join
                        
                    </button>
                    <p class="header-p">Coming to you July 2023</p>
    
                </div>
                <div class="wrapper">
                    <!-- <video controls>
                        <source src="{% static 'imgs/mobile_video.webm' %}"    type="video/webm">
    
                    </video> -->
                </div>
            </div>

        </section>
Tags:

2

Answers


  1. 0

    You don’t have to use position absolute for your video, instead, you could set the display to block and then use margin to center your video like this:

      video {
    width: 80%;
    border: 2px solid #7cd959;
    display:block;
    margin:0 auto;
  }

    Also if you have to use absolute for the position, here’s how you have to do it:
    First you need to give the position:relative to the parents which is the .wrapper and
    left: 10%; to the video:

      .wrapper {    
    border: 2px solid black;
    background:  url(/static/imgs/bg_video.png); 
    //Dimension is 1920*1080
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;      
    position:relative;
  }
  video {
    position: absolute;
    left: 10%;
    width: 80%;
    border: 2px solid #7cd959;
  }

    Also once I created this funny app to understand the CSS positioning, I hope you like it:

    CSS positioning

    Login or Signup to reply.
  2. 0

    Variant with flex:

    .paragrah-desktop {
    margin: 20px;
    display: flex;
    text-align: center;
}

.wrapper {    
    border: 2px solid black;
    background:  url("/images/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #fff;
}

video {
    width: 80%;
    margin: 25px;
    border: 2px solid #fff;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/styles/main.css"/>
</head>
<body>
    <section class="container" id="header">
        <div class="paragrah-desktop">
            <div class="subheader">
                <h1 class="desktop-title">UPGRADE ALERTS</b></h1>
                <button type="button" class="btn" data-toggle="modal" data-target="#exampleModal">Join
                    
                </button>
                <p class="header-p">Coming to you July 2023</p>

            </div>
            <div class="wrapper">
                <video controls>
                    <source src="{% static 'imgs/mobile_video.webm' %}"    type="video/webm">
                </video>
            </div>
        </div>

    </section>
</body>
</html>

    Screenshot

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search