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>