bootstrap的video不能和一个框里的元素一起自适应

.container- a {  display: block;
    flex-direction: row;
    width: 100%;
    height: 400px;
    max-height: 450px;
}
.jianjie{
    float: right;
    width: 40%;
    height: 450px;
    background-color: rgb(82, 32, 139);
    display: block;
    flex-direction: column;
}
.vid-wrap{
    float: left;
    width:100%;
    background: #000;
    position:relative;
    padding-bottom:56.25%;    /需要用padding来维持16:9比例,也就是9除以16/
    height: 0;
}
.vid-wrap video{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%
}
.out{
    max-width: 60%;
}

               
           
                          
       
           
               

名字

               

人物

               

评分

               

简介

           
   

padding也算在vid-wrap的内容,所以video对象是铺满整个vid-wrap对象,就是vid-wrap多大video就多大。不想变形可以对video使用object-fit: contain
https://www.runoob.com/cssref/pr-object-fit.html

img


你这个video设置绝对定位了,脱离文档流了,怎么跟着一起自适应