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

Switching between all tabs simultaneously in an MDX page (React + Gatsby + MDX) using @reach/tabs

Creating a Tab component for a Gatsby site has proved to be a bit tricky. Imagine having a page with multiple tabs all labeled the same: Heading 1 First tab block Tab 1 | Tab 2 Content Tab 1 Second tab block Tab 1 | Tab 2 Content Tab 1 for the second bl ...

javascriptreactjsgatsby

JavaScript table supported by a REST API

Issue at hand: I am in search of a table component that seamlessly integrates with my web application. The challenge lies in connecting the existing REST endpoints to the table for data retrieval, whether it be paginated or not. Adjusting the endpoints t ...

javascriptjqueryjsonrest

Facing an issue in React-Native where unable to navigate to the second screen

I hope you don't mind the length of my query, as this happens to be my debut here and I am really eager to unravel the mysteries surrounding my code conundrum. Your assistance in this matter would be greatly appreciated. Could someone please lend me ...

javascriptreact-native

Enhancing Tapestry Grid component column sort icons

In the Tapestry Grid components, the default column sort icons are blue and white, but if your page has a different color scheme, you may want to personalize them. How can you replace the default Tapestry Grid column sort icons with your own custom icons? ...

csstapestry

When the cursor is placed over it, a new div is layered on top of an existing

Currently, I am working on a project with thumbnails that animate upon hovering using jQuery. One of the challenges I have encountered is adding a nested div inside the current div being hovered over. This nested div should have a background color with som ...

jquerycsshoveraddclass

How can the actual values from the Repeater be retrieved using Protractor, instead of the Elements?

As I develop a Protractor script to test my quiz game, which involves displaying random questions and answers, I am faced with the challenge of identifying the correct answer. This information is not directly available as an element on the page, so I need ...

javascriptangularjstestingprotractorend-to-end

Dynamic content displayed within adjacent div elements

I am currently working on a project where I am dynamically generating an outline by creating panels and labels in ASP.NET. Each node in the outline is defined by an outline number and outline text, which are obtained from a database that defines the relati ...

asp.netcsshtml

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss

Tips on transforming truncated surfaces into complete entities

When working in Three.js, I encountered a situation with a 3D object where local clipping planes were used to render only a specific part of the object. However, due to the nature of 3D objects being "hollow" (only rendering the outer surface), when somet ...

javascript3dthree.jsshaderclip

Jasmine - verifying variable invocation in test function

As part of my testing process, I am exploring a scenario where a service method is called using a local variable within an angular controller. In this particular case, when the items array is empty, a modal for creating a new item will be triggered via th ...

javascriptangularjsjasmine

Exploring logfile usage in JavaScript. What is the best way to structure the log?

Currently, I am developing a Python program that parses a file and records the changes made to it. However, I am facing a dilemma regarding the format in which this information should be saved for easy usage with JavaScript on the local machine. My objecti ...

javascriptjsonparsing

Is it necessary to have the WAI-ARIA attribute aria-labelledby on a nested input element?

Do I need the attribute aria-labelledby on an <input> element nested within a <label> element that acts as a label for the <input>? For example: <label>This is an input field: <input type="text" /> </label> Or should ...

htmlwai-aria

When you click on the Admin Panel Side menu, the page refreshes instead of expanding the menu item

I have encountered a strange problem with the AdminLTE admin panel template that I am using in my Angular 11 application. Everything is loading fine with the menu items, but when I click on an item, instead of expanding the group, the page refreshes. Here ...

javascriptbootstrap-4adminlte

Sort through the API's array

Currently, I am working with the OpenWeather API's 5-day 3-hour forecast feature and encountering an issue regarding the response JSON. The array contains 40 items, each with a "dt_txt" value in the format of "2018-11-22 15:00:00". My goal is to displ ...

javascriptreactjs

Error encountered in the Django-powered Blog App: comment_list unable to display correctly

Having trouble displaying the comment_list on the Article Page in a blog app by Django 1.9. Check out the Article Page View.py snippet: 46 def article(request): 47 try: ...

pythondjango

Display information from Node.js on an HTML page

I am working on a nodejs project where I need to login on one page and display the result on another page using expressjs. Below is my code for login.ejs: <!DOCTYPE html> <html lang="en" dir="ltr"> <body> <form method="PO ...

javascripthtmlnode.jsexpress

Encountering a Component Exception error in React Native while attempting to implement a Victory chart component

Currently, I am exploring the Victory library for react native to create a line chart for my budgeting application. Below is the code snippet from my Graph component: import React from 'react'; import { View, StyleSheet } from 'react-native& ...

javascriptreactjsreact-nativejsxvictory-charts

Styling a playbook using CSS Grid management techniques

Exciting to create a playbook layout style, here's how it goes: Name: Text starting here - unique style #1 text that moves to a new line with a different look - unique style #2 more text continuing on another new line ...

htmlcssflexbox

combine several arrays next to each other based on a specified key

I have a collection of three sets, each containing three elements: Set1 = [[apple, 2, 4], [banana, 5, 5], [cherry, 4, 1]] Set2 = [[banana, 1, 7], [cherry, 3, 8], [date, 5, 4]] Set3 = [[apple, 5, 2], [banana, 0, 9], ...

javascriptd3.jsplotly

Should a tabindex attribute be added to an input field with type="reset"?

Would adding a tabindex attribute to an input[type="reset"] serve any accessibility or semantic purpose? Or would it be better to avoid it to prevent forms from being inadvertently and frequently reset? ...

htmlformsaccessibilitysemantics