Как стилизовать и структурировать внутренний <div>для сохранения родительского размера <div>на мобильном устройстве без использования px для измерений - PullRequest
Новая
       0

Как стилизовать и структурировать внутренний <div>для сохранения родительского размера <div>на мобильном устройстве без использования px для измерений

2 голосов
/ 06 октября 2019

Я делаю видеоинтерфейс с разными слоями, которые отображаются / скрываются с помощью JQuery. В настоящее время накладки соответствуют размеру видео проигрывателя по умолчанию независимо от размеров экрана на рабочем столе. К сожалению, на мобильных устройствах (iPhone) оверлеи имеют только высоту, достаточную для размещения содержимого, а не полную высоту видеоплеера.

Я пробовал различное вложение элементов div и множество комбинаций и классов для CSS родительских и дочерних элементов div, включая:положение: относительное / абсолютное отображение: таблица / ячейка таблицы / блок и т. д. Использование размеров в пикселях для родительского div помогло, но оно дает меньший контроль над размером видеоплеера при изменении размеров экранов / браузера. Разрешение автоматического размера экрана более удобно для пользователя. 

.video-box {
  position: relative;
}

.overlay1,
.overlay2 {
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  display: table;
  position: absolute;
  top: 0px;
  right: 0px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div class="video-box">
  <video><source src="video.mp4"></video>

  <div class="overlay1">
    <div class="content">
      <h3>You are about to watch a video</h3>
    </div>
  </div>

  <div class="overlay2">
    <div class="content">
      <h3>Video is over</h3>
    </div>
  </div>
</div>

Моя цель состоит в том, чтобы каждый слой соответствовал точному размеру и покрывал видеоплеер текстовым содержимым по центру по вертикали и горизонтали. Код, который я использую, заставляет его работать на настольном компьютере (включая Chrome Insize Mobile Resizing), но не на реальном мобильном устройстве. Размер наложения только по горизонтали, чтобы соответствовать текстовому содержимому, а не по всей высоте видеоплеера.

1 Ответ

0 голосов
/ 06 октября 2019

Вместо второго div, .content, вы можете использовать css-flex , чтобы содержимое находилось посередине. Пожалуйста, попробуйте следующий код. 

.video-box {
  position: relative;
}

video {
  max-width: 100%;
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.2);
}
<div class="video-box">
  <video><source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"></video>

  <div class="overlay">
    <h3>video is over</h3>
    <p>what to do next</p>
  </div>

  <div class="overlay">
    <h3>Video is over</h3>
  </div>
</div>
...