Problems fitting a video background with css grid

Issue

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 class="main-container">

        <div class="item1">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 class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>      
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
        <div class="item9">9</div>
        <div class="item10">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?

Solution

Use object-fit and object-position to scale and position the video.
Even if the element is 1920×1080 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 class="main-container">

        <div class="item1">
            <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 class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>      
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
        <div class="item9">9</div>
        <div class="item10">10</div>
        
        
        </div>

Answered By – Code Spirit

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.