Вычисление значения масштаба для преобразования iframe, чтобы покрыть его содержимое в области просмотра - PullRequest
Новая
       10

Вычисление значения масштаба для преобразования iframe, чтобы покрыть его содержимое в области просмотра

4 голосов
/ 14 января 2020

Я пытаюсь сделать объект-прикрытие: обложка (или фон-размер: обложка, если бы это было изображение), используя iframe с видео vimeo. Поскольку vimeo регулирует размер видео в соответствии с шириной / высотой / соотношением сторон iframe, я подумал, что можно добиться использования свойства transform: scale.

Правильно знать, у меня есть эта логика c для масштабирования iframe с видео vimeo, в большинстве случаев делает работу (покрывает экран), но оно не идеально: 

const w = window.innerWidth
const h = window.innerHeight
const ratioVideo = 640 / 360
const ratioScreen = w / h

const calculatedRatio = ratioVideo / ratioScreen
// minimum scale value
const minRatio = 1.45

scaleVideo = calculatedRatio > minRatio ? calculatedRatio : minRatio

А потом у меня есть: 

<iframe :style="`transform:scale(${scaleVideo})`"..>

, но оно не будет Заполните полностью область просмотра, особенно когда отношение области просмотра <1 (пейзаж с гораздо большей шириной, чем высота) </p>

Каким будет правильный расчет (значения преобразования минимального масштаба) для каждого разрешения? Я думаю, у меня есть отдельный портрет / пейзаж, но я не могу найти ключ

Есть мысли?

-EDIT-

Вот кодовый ключ с моим текущим кодом, если это помогает понять (в ванили js, потому что я использую vuejs в моей среде)

-UPDATE-

Это обновленное codepen почти достигает того, что я имею в виду, но по причине я должен добавить небольшой процент к вычисленному соотношению, я думаю, это из-за полос прокрутки или что-то еще? предварительный просмотр кода: 

let calculate = function () {
  const w = window.innerWidth
  const h = window.innerHeight
  const ratioVideo = 640 / 360
  const ratioScreen = w / h

  if (ratioScreen > ratioVideo) {
    calculatedRatio = ratioScreen / ratioVideo
  } else {
    calculatedRatio = ratioVideo / ratioScreen
  }

  /* a little % more */
  calculatedRatio = calculatedRatio * 1.07 
  document.documentElement.style.setProperty('--s', calculatedRatio);
}

1 Ответ

3 голосов
/ 20 января 2020

Если вы удалите центрирующий код из CSS, ваша демонстрация будет работать. См. Это перо 

    .video {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    :root {
      --s: 1;
    }

    .video__player {
      position: absolute;
      width: 100%;
      height: 100%;
      transform: scale(var(--s));
    }

let calculate = function () {
  const w = window.innerWidth
  const h = window.innerHeight
  const ratioVideo = 640 / 360
  const ratioScreen = w / h

  const calculatedRatio = Math.max(ratioScreen, ratioVideo) / Math.min(ratioScreen, ratioVideo);

  document.documentElement.style.setProperty('--s', calculatedRatio);
  console.log(calculatedRatio)
}

calculate()
window.onresize = () => {
  calculate()
}

Объяснение: ваш iframe установлен на 100% ширины / высоты, что означает, что он технически уже центрирован относительно области просмотра. При использовании функции transform: scale без указания transform-origin значение по умолчанию будет 50% 50%, что означает, что оно будет масштабироваться от центра этого элемента, а не от верхнего левого угла.

...