Блог

Главная - Вопросы по программированию - Как удалить ненужные пробелы / поля под адаптивным видео

Как удалить ненужные пробелы / поля под адаптивным видео

#html #css #video #mobile #responsive

#HTML #css #Видео #Мобильный #отзывчивый

Вопрос:

У меня есть видео и некоторый контент ниже, однако при уменьшении высоты видео на мобильном устройстве я получаю большое количество пробелов внизу.

 @media only screen and (max-width: 600px) {  
  video { 
    height: 80%;
    }

Я мог бы уменьшить его с помощью margin-bottom и т. Д., Но я бы предпочел, чтобы это было более автоматизировано, чем для всех размеров экрана, и я уверен, что мне просто нужно обернуть видео в своего рода контейнер и управлять полным видео / контейнером, включая h2 и т. Д. Там? Вы можете увидеть код здесь: https://jsfiddle.net/4v9fk7uq /

Комментарии:

1. Я думаю height: 100vh , что to #fashion создает разрыв.

Ответ №1:

min-height: 100vh To #fashion вызывает разрыв между the <main> и video.

Вы можете уменьшить значение min-height #fashion до 80vh .

Вот так —

 container {
  position: absolute;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

div#fashion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-family: Moderne Sans, sans-serif;
  text-align: center;
  font-size: 2rem;
  width: 100%;
  letter-spacing: .5rem;
}

h2 {
  z-index: 1;
  font-family: Century Schoolbook, Century Schoolbook L, Georgia, serif;
  font-size: 8vmin;
  text-align: left;
  margin: 2rem 3rem 0;
  position: absolute;
  bottom: 20%;
  color: #fff;
  font-weight: 100;
}

@media only screen and (max-width: 600px) {
  video {
    height: 80%;
  }
  h2 {
    position: absolute;
    bottom: 20%;
  }
  div#fashion {
    min-height: 80vh;
  }
} 
 <div class="container">
  <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion.jpg" playsinline autoplay muted loop>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/fashion.mp4" type="video/mp4">
</video>
  <div id="fashion">
    <h2>The new kids on the block.</h2>
  </div>
</div>

<main>
  <h1>example content
  </h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolorum totam dicta quidem eaque quos neque, dolor numquam itaque placeat! Id quia at officia, accusamus placeat vero sed ea quo voluptates. Earum praesentium saepe maxime, esse veniam aperiam,
    officiis beatae error voluptatem odit provident optio vel eum nemo, facilis numquam fugit laboriosam. Libero veritatis repellendus quo. Facere perferendis blanditiis, voluptates cupiditate veniam repudiandae cumque sit provident nobis, beatae aut
    aliquam dolorem qui porro repellendus totam animi delectus laudantium.</p>

</main>

Ответ №2:

Если вы поменяетесь местами:

  video {
      height: 80%;
   }

Для

 video {
          height: 100%;
       }

пробелов не будет