使用 css 网格拟合视频背景时出现问题

Question

这里的各个方面都是新的 xd 抱歉我的英语不好。我试图在我的页面上制作一个典型的“背景”视频，但无论我做什么，我都无法使视频适合网格单元格的内容。

想法是视频保持在 z-index -1 并适合 1920x1080px 但由于某种原因它被调整大小并保持在中心 o 做疯狂的事情。

首先，我用 div 制作了一个网格模板，我将其中的第一个设为 1920x1080px，2 列。然后当我在该单元格上放入视频时会发生这种情况（视频为 1920x1080 像素）： enter image description here

我尝试使用 pos: absolute 放置视频，我也尝试使用容器，分配高度、宽度、对齐内容、top:0、显示：块...我现在没有任何线索，我试过了几乎所有我知道和搜索过的东西，但我做不到。

这是我的 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(); ?>

还有我的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;

}

你能帮我吗？我做错了什么？

Answer 1

使用object-fit和object-position缩放和定位视频。即使元素为 1920x1080，视频内容也可能不取决于视频宽高比，默认情况下会缩放以包含在元素中。

/*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>

Answer 2

enter image description here

这是检查员 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 视频 {

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;

}

使用 css 网格拟合视频背景时出现问题

Problems fitting a video background with css grid

html

css

php

video

grid