Центральное видео iframe без позиции: абсолютное - PullRequest
Новая
       29

Центральное видео iframe без позиции: абсолютное

0 голосов
/ 11 ноября 2019

Я пытаюсь разместить видеофрагмент в центре страницы над галереей изображений. Я вложил iframe в оболочку, поэтому мой css переходит в оболочку div> video div> iframe. Проблема в том, что мне нужно, чтобы само видео реагировало при сохранении соотношения сторон 16: 9.

Мне удалось отцентрировать видео с помощью позиции: абсолютная, но я хочу избежать этого, чтобы сохранить всечистые и отзывчивые и размещать изображения под ним.

Вот мой текущий код: 

.video-wrapper {
  width: 60vw;

}

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 -> 9/16x100 */
  overflow: hidden;
  display: block;
}

.video iframe {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Галерея изображений под видео имеет следующие свойства: 

      .grid-container {
        margin:  auto 20vw;
        padding: 0 1vw 0 1vw;
        display: grid;
        flex-flow: row wrap;
        grid-template-columns: repeat(14, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-gap: .5vw;
        position: relative;
        margin-bottom: 5vh;
      }

1 Ответ

0 голосов
/ 12 ноября 2019

Используйте flexbox, flexbox упрощают центрирование элемента по вертикали и горизонтали на его родительском элементе, чтобы центрировать элемент, вам просто нужно добавить отображение flexbox на элемент-обертку и поле: auto для элемента, который вы хотите центрировать 

.video-wrapper {
  width: 60vw;
  display: flex; 
}

.video {
  margin: auto;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 -> 9/16x100 */
  overflow: hidden;
  display: block;
}
...