Problems fitting a video background with css grid-CodePudding

new here at every aspect xd Sry for my bad english. Im trying to make a typical "background" video at my page but i can't to make the video fit the content of the grid cell whatever I do.

The idea is that the video stay at z-index -1 and fit 1920x1080px but for some reason it got resized and stay at the center o do crazy things.

The first I do its a grid template with divs, and I make the first of them 1920x1080px, 2 columns. Then this happens when I put in the video on that cell (video is 1920x1080px): enter image description here

I tried putting video with pos: absolute, I tried with the container too, assigning height, widths, justify-content, top:0, display: block ... i have no clues now, ive tried almost everything that I knew and googled but I couldnt do do the shit.

Heres my html:

<?php get_header(); ?>

<div >

        <div >1
            <video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
        </div> 
        <div >2</div>
        <div >3</div>
        <div >4</div>
        <div >5</div>      
        <div >6</div>
        <div >7</div>
        <div >8</div>
        <div >9</div>
        <div >10</div>
        
        
</div>

<?php get_footer(); ?>

And my css

/*GRID index*/
.main-container {
    
    display:grid;
    background-color: red;
    grid-template-columns: auto auto;
    box-sizing:border-box;
  
}
.main-container div {
    color:black;
    border: 1px solid black;
     
}
.main-container video {
    display:block;
    top:0;
    bottom:0;
    right:0;
    left:0;
    width:100%;
    height:100%;
    
}

.item1{
    
    grid-column: 1 / 3;
    background-color: green;
    height:1080px;

}

Can u help me? What I am doing wrong?

CodePudding user response：

Use object-fit and object-position to scale and position the video. Even if the element is 1920x1080 the video contents may not depending on the videos aspect ratio and by default get scaled to be contained in the element.

/*GRID index*/
.main-container {
    
    display:grid;
    background-color: red;
    grid-template-columns: auto auto;
    box-sizing:border-box;
  
}
.main-container div {
    color:black;
    border: 1px solid black;
     
}
.main-container video {
    display:block;

    width:100%;
    height:100%;
    
    /* Scale video to container size */
   object-fit: cover;
   object-position: center;
    
}

.item1{
    
    grid-column: 1 / 3;
    background-color: green;
    height:1080px;

}

<div >

        <div >
            <video id="vid" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
        </div> 
        <div >2</div>
        <div >3</div>
        <div >4</div>
        <div >5</div>      
        <div >6</div>
        <div >7</div>
        <div >8</div>
        <div >9</div>
        <div >10</div>
        
        
        </div>

CodePudding user response：

enter image description here

Heres the inspector with this css:

/*GRID index*/

.main-container {

display:grid;
background-color: red;
grid-template-columns: auto auto;
box-sizing:border-box;

} .main-container div {

color:black;
border: 1px solid black;

} .main-container video {

position:absolute;
align-self:stretch;
justify-self:stretch;
display:block;
top:0;
bottom:0;
right:0;
left:0;
width:100%;
height:100%;
min-height:400px;
min-width:400px;

}