Question

我有Ipad边框背景，我想将视频放在其中，但是问题是当我调整屏幕尺寸时，视频会从ipad边框弹出。我要制作它，使其保留在所有屏幕尺寸内。

任何帮助将不胜感激。

.carousel-inner video {
    margin: 4% 8%;
    margin-right: 8%;
    margin-bottom: 4%;
    margin-right: 8%;
    margin-bottom: 5%;
    margin-right: 0;
    margin-bottom: 11%;
    border-radius: 15px;
    background: black;
    border: 0;
    height: auto !important;
    position: relative;
    padding-bottom: 0%;
    width: 106% !important;
}

.carousel-inner video{
    background: url('http:/wp-content/uploads/2018/11/01-HOME-iPad-frame-1.png') no-repeat;
    background-size: auto auto;
    box-sizing: border-box;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
    padding: 4.4% 9% 11%;
    padding-left: 9%;
    padding-left: 7.8%;
    object-position: top;
    object-fit: fill;
    border-radius: 20px;
    margin: 0;
}

// this one is with media query
.carousel-inner video {
    width: 100%!important;
    height: 105%!important;
    padding: 2.4% 9% 11%;
    padding: 3.4% 8% 11%;
    padding-left: 9%;
    padding-left: 7.8%;
    object-position: top;
    object-fit: fill;
    border-radius: 20px;
    margin: 0;
}

HTML：

<div class="carousel-inner cherryimg1">
   <div class="carousel-item active">
      <div class="carousel-item-container">
         <video id="paravid2" controls="true" class="paravid d-block w-100" poster="https://i.vimeocdn.com/video/754747621.jpg" autoplay="autoplay" loop="loop" muted="" width="758" height="570"><source class="defmp4" src="https://player.vimeo.com/external/313435335.sd.mp4?s=a7a54c15d6deb651b1177f1dbc50bfe2d7e0eb7f&amp;profile_id=165" type="video/mp4"></video>
      </div>
   </div>
</div>

Answer 1

您需要添加CSS媒体查询。或使用类似引导程序的方法。

这是一些入门代码...

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
     /*Define the new css rules here for your video and site in here
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

使用类似引导程序https://getbootstrap.com/docs/4.1/getting-started/introduction/的方法它已经内置了适用于所有屏幕尺寸和移动查看的规则。请为您的未来项目进行查看，因为它需要花费大量精力来为网站创建自定义媒体查询

顶级CSS上的视频

1 个答案: