Видео на вершине 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 медиа запросы.Или с помощью чего-то вроде начальной загрузки.

Вот некоторый стартовый код ...

/* 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/ В него уже встроены правила для всех размеров экрана и мобильного просмотра.взгляните на него для ваших будущих проектов, так как он требует много работы, связанной с созданием пользовательских медиа-запросов для вашего сайта