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

Question

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

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

第一个是带有 div 的网格模板，我将第一个设为 1920x1080px，2 列。 然后，当我将视频放入该单元格时（视频为 1920x1080px），就会发生这种情况： 在此处输入图像描述

我尝试使用 pos: Absolute 放置视频，我也尝试使用容器，分配高度，宽度，对齐内容，顶部：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

在此处输入图像描述

这是带有此 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;
 

}
.主容器视频 {

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;

}