Prevent black margins in video aspect ratio of 1:1 using CSS

Question

Prevent black margins in video aspect ratio of 1:1 using CSS

I am working with a square video (scale 1:1) and I need to position it in the center of the screen.

My main issue is that when using the <video> tag, two black areas are inserted on both sides. Is there a way to prevent this from happening?

https://i.sstatic.net/gBio4.png

<div style="width: 400px; height: 400px; background-color: red;">
        <video>
        <source src="~/Content/video/FreeBirdConstruction.mp4" type="video/mp4">
    </video>
</div>

The containing div is set to be a square (400px x 400px), so why doesn't the video fill it? I have also attempted to use VideoJS but haven't been able to solve the problem.

Another question arises. Whenever I try to center the div on the screen, like this:

position: absolute; /*it can be fixed too*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
overflow: auto;

The div initially appears in the center of the screen, but then disappears instantly.

Could someone please assist me in finding a solution to this issue? Thank you for your help.

html css asp.net-mvc video.js

Answer 1

Answer №1

If you want to make sure the video stays square, I recommend setting the height and width directly within the video tag like this:

<div style="background-color: blue;">
    <video width="400" height="400">
        <source src="~/Content/video/FreeBirdConstruction.mp4" type="video/mp4">
    </video>
</div>

Setting a specific width and height for your div may be causing some confusion in centering it. Try simplifying your CSS by using the following code to ensure your div is centered:

div{
    display:inline-block; /*keeps the div the size of its contents*/
    margin:auto; /*centers the div on the screen*/
}

Answer 2

If you want to make sure the video stays square, I recommend setting the height and width directly within the video tag like this:

<div style="background-color: blue;">
    <video width="400" height="400">
        <source src="~/Content/video/FreeBirdConstruction.mp4" type="video/mp4">
    </video>
</div>

Setting a specific width and height for your div may be causing some confusion in centering it. Try simplifying your CSS by using the following code to ensure your div is centered:

div{
    display:inline-block; /*keeps the div the size of its contents*/
    margin:auto; /*centers the div on the screen*/
}

Prevent black margins in video aspect ratio of 1:1 using CSS

Answer №1

Similar questions

Ensure that the Div element is able to wrap lines in the same way that the Span element

Why is the dropdown list value returning as null upon clicking the submit button?

Arranging a flex item below another flex item within a flexbox container

React - issue with modal due to invariant violation

Validation and Summaries in MVC 2: Ensuring Data Accuracy and Cl

What is the method for incorporating multiple classes into an li element?

Organizing information in local storage using an array and converting it to a string

Required inputs do not disrupt the form's action flow

Exploring ways to enhance Bootstrap Navigation by adding extra link options. Seeking a resolution using jQuery

Using an object as a parameter in the Include Template Tag in Django

Having trouble retrieving a Controller parameter from a form in ASP.NET MVC?

Displaying elements side by side on larger screens and centered on smaller screens

Guide on using JavaScript to extract and display a random text from a datalist upon clicking with the onclick event

Tips for concealing overflowing CSS content

Utilizing the DirectusImage tag for a stylish background effect

Is the form always being processed by onsubmit and confirm?

Reveal and Conceal, the ever-changing show

Generating an Array using Jquery

Issue with Bootstrap causing individual scroll panels for each column to be unresponsive

Web browser displaying vertical scroll bars centered on the page