Адаптировать блок по высоте до получения первого кадра(video)

Question

На странице есть плеер, блок с плеером. В нем проигрываются mp4 файлы, ширина и высота кадра у каждого видеофайла разная. Соответственно высота блока подстраивается под видеокадр, как только первичные данные были подгружены.

То есть, если видеофайл еще не получен, высота блока будет другой. Из-за этого блок и содержимое страницы прыгает.

Вопрос в том, как сделать так, чтобы до получения кадра, html блок уже принял необходимую высоту?

Как вариант, высоту и ширину сохранять в базе данных и через js подстраивать. Что выручает, но тоже не акти решение.

Возможно ли сделать это при помощи css. Ширина и высота кадра известа, к блоку возможно задать переменную к примеру в стили

--kadr-w: 400px;
--kadr-h: 200px;

Возможно ли через css, имея данные, взять текущую ширину блока, взять высоту и ширину кадра. Произвести вычисления и собственно выставить высоту html блоку?

Answer 1

Тут скорее всего речь идёт о сохранении пропорций элемента, относительно его ширины..

.ratio {
  display: block;
  width: 100%;
  background-color: #999;
  position: relative;
}

.ratio::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(var(--h) / var(--w) * 100%);
}

.ratio-inner { 
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/* для демо */
body {
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

.resize {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 200px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
}

.ratio:not(:last-child) {
  margin-right: 10px;
}

.ratio-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="resize">
  <div class="ratio" style="--w: 400; --h: 200;">
    <div class="ratio-inner">400x300</div>
  </div>

  <div class="ratio" style="--w: 16; --h: 9;">
    <div class="ratio-inner">16x9</div>
  </div>

  <div class="ratio" style="--w: 5; --h: 4;">
    <div class="ratio-inner">5x4</div>
  </div>
</div>

Могу много воды написать по поводу того как это работает, но объясню проще.

Псевдоэлемент ::before используется для того, чтобы никак не растягивать родительский элемент .ratio.
Так же он использует height: 0, для того, чтобы процент padding-top высчитывался строго от ширины псевдоэлемента (который будет равен 100% ширине родителя).
Опять же, чтобы не закосячить эти размеры, все элементы внутри .ratio должны быть position: absolute.

Хотите более подробнее, читайте про соотношение сторон, единица измерения "проценты" CSS.

Answer 2

Если речь только о aspect-ratio то поддержка это штуки очень большая и без трудоёмких вычислений на css

.item {
  width: 250px;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ar1 {
  aspect-ratio: 1/1;
}

.ar2 {
  aspect-ratio: 16/9;
}

.ar3 {
  aspect-ratio: 0.5;
}

<div style="display: flex; align-items: center;justify-content: center; gap: 10px;">
  <div class="item ar1">1x1</div>

  <div class="item ar2">16x9</div>

  <div class="item ar3">0.5</div>
</div>

БЛОГ НА HUSL

Адаптировать блок по высоте до получения первого кадра(video)

Ответы (2 шт):