css - CSS 上的视频

Question

我有这个 Ipad bazel 背景，我想把我的视频放在里面，但问题是当我调整屏幕大小时，视频从 ipad bazel 弹出。我想让它在所有屏幕尺寸上都保持在内部。

如有任何帮助，我们将不胜感激。

.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 媒体查询。或者通过使用 Bootstrap 之类的东西。

这是一些入门代码...

/* 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) {...}

使用 Bootstrap 之类的东西 https://getbootstrap.com/docs/4.1/getting-started/introduction/它已经内置了适用于所有屏幕尺寸和移动设备观看的规则。为您 future 的元素看看它，因为它消除了为您的网站创建自定义媒体查询所涉及的大量腿部工作