Placing the video at the center of the background image

                   

Can someone assist me with a design issue I'm facing? I have two divs within a section. The left div contains a heading and a button, while the right div contains a video. However, when I try to add a background image to the video using CSS in the wrapper class, I encounter problems with the dimensions of the background image. My goal is for the video to be centered within the background image. Any suggestions on how to achieve this?

 

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

   
javascripthtmlcssdjangobootstrap-5

Answer №1

If you want to center your video without using absolute positioning, try setting the display to block and use margin like this:

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

But if you really need to use absolute positioning, make sure to give position:relative to the parent element (the .wrapper) and set left:10% for 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;
  }

I once created a fun app to help understand CSS positioning, check it out here:

CSS positioning

Answer №2

Using flex for a different layout:

.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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic color change in SVG

I am facing an issue with changing the color of svg images in a menu list using the filter CSS property. Even though I have obtained the correct filter value from a library that converts hex to CSS filter, React seems unable to set this property on the ima ...

cssreactjscss-filters

The situation where a Javascript switch case continues to fall through to the default case even when a 'break' statement

I am currently setting up a node.js discord bot that utilizes firebase to save a user's status. My switch statement is functioning smoothly, handling each command effectively. The default case looks like this: default: message.reply("Unknown comm ...

javascriptnode.jsfirebasefirebase-realtime-databaseswitch-statement

Error rendering {message} object on the Chrome Console

In my ReactJS component, I am utilizing the {message} parameter from props. Check out the code snippet below: import React from "react"; const MyMessage = ({ message }) => { if (message?.attachments?.length > 0) { return ( < ...

javascriptreactjsjsongoogle-chrome

Ensure that the central section of the slider remains illuminated

Looking for help with customizing my "product" slider, lightSlider. I want the middle div to always be highlighted when navigating through the slider. Here's what it looks like currently: Link to screenshot - current. My goal is to achieve this look: ...

javascriptjqueryhtmlcsswordpress

Unable to adjust metadata titles while utilizing the 'use client' function in Next.js

I have a /demo route in my Next.js 13 application, and it is using the App Router. However, I am facing an issue with changing the title of the page (currently displaying as localhost:3000/demo). The code snippet for this issue is shown below: /demo/page ...

javascriptreactjsnext.js

Capturing user input with Angular Material forms in HTML

In the process of working on a project in Angular, I am utilizing the Angular Material component library. As part of this project, I am creating a form with multiple fields. Everything is functioning properly, however, the layout appears slightly off: ht ...

htmlangulartypescriptangular-material

Error encountered while handling document events during server-side rendering in ReactJS

I am currently developing a React.js application that requires keyboard navigation for a horizontal scrolling carousel of items. In the existing version, only the left and right arrows are used for navigation, with Enter being used to make selections. I ha ...

javascriptreactjsexpress

Tips for launching a colorbox within a specific div container

I am looking to implement a color box that opens without a popup and only shows/hides inside a specific div. Is it possible to target a div to open the colorbox content? <a href='#myGallery' class='group'>click here</a> &l ...

javascriptjquerycolorbox

Vue js homepage footer design

I am struggling to add a footer to my Vue.js project homepage. Being an inexperienced beginner in Vue, I am finding it difficult to make it work. Here is where I need to add the footer Below is my footer component: <template> <footer> </ ...

javascriptvue.jsfooter

What steps can be taken to stop the update function from inserting data into MongoDB from a Meteor application

Within my Meteor method, I have implemented a function to check for existing documents. If the document is not found, it gets inserted into the database. However, if it is found during a second attempt, the document is updated and a new one is also inserte ...

javascriptmongodbmeteor

How do you switch selection to "hold" mode using Javascript?

In my Markdown preview area, clicking on text will cause the preview area to switch to a markdown source editor automatically, with the cursor jumping to the position corresponding to where it was clicked. function onMouseDown(e) { const range = documen ...

javascriptreactjs

Tips for locating a key within an object that houses a specific value in its array

In my Coffeescript code, I have created the following Javascript object: urlSets = a: [ 'url-a.com' 'url-b.com' 'url-c.com' ] b: [ 'url-d.com' 'url-e.com' 'url-f.com&a ...

javascriptarrayscoffeescriptunderscore.jsjavascript-objects

Is there no body sent in the $.ajax post request?

My server is returning an error when I try to make a simple post request. It's saying that the post request has no body and all the keys have an "undefined" value. Here is the code for my post request: let alert_title = 'Alert'; let alert ...

javascriptphpnode.jsajax

Manipulating visibility of an input tag using JQuery

Having a simple input tag: <input id="DAhour" type="number" style="width:50px; font-size: xx-small; visibility:hidden"> Initially, the input tag is set to be hidden. Upon changing a combobox to a specific index, it should become visible. Despite su ...

javascriptjqueryhtml

Managing iframes in React using reference methods

Trying to set the content of an iframe within a React component can be a bit tricky. There is a component that contains a handleStatementPrint function which needs to be called when the iframe finishes loading. The goal is to print the loaded iframe conten ...

javascripthtmlreactjsiframeref

Setting a default date dynamically for v-date-picker in the parent component, and then retrieving the updated date from the child component

I'm working with a custom component that utilizes the v-date-picker in various instances. My goal is to have the ability to dynamically set the initial date from the parent component, while also allowing the date to be modified from the child componen ...

javascriptvue.jsvuetify.jsvue-props

Tips on avoiding the collapse of the right div when positioned under a left float in a full page layout

Trying out a full page layout for the first time, with a left div serving as a block style nav. #admin_nav { width: 230px; height: 100%; background-color: #f9f9f9; border-right: 1px solid #ddd; float: left; } The content is on the rig ...

htmlcsscss-float

Bringing together embedded chat and stream seamlessly with CSS styling

I'm in the process of integrating a chat feature with my Twitch stream on a Xenforo forum page. I aim for the stream to be displayed in 16:9 aspect ratio to ensure high definition quality, and I want it to adapt to the user's screen resolution. B ...

htmlcssiframetwitchxenforo

The app's connection issue persists as the SDK initialization has exceeded the time limit

We are currently facing an issue when trying to publish a new manifest for our app in the store. The Microsoft team in India is encountering an error message that says "There is a problem reaching the app" during validation. It's worth noting that th ...

javascriptvue.jsmicrosoft-teamsmicrosoft-teams-js

Saving HTML files can cause formatting issues

After creating a website with the web design tool "Nicepage", I noticed something strange. When visiting the site through this link: It appears to be working perfectly fine (please let me know if it isn't). The layout should resemble this image: htt ...

htmlcssweb