Видео YouTube: поместите контент на отца 16: 9 (размер фона: обложка) - PullRequest
Новая
       15

Видео YouTube: поместите контент на отца 16: 9 (размер фона: обложка)

0 голосов
/ 14 мая 2018

Есть ли способ имитировать object-fit: cover или background-size: cover на YouTube iframe или с помощью API?

Обратите внимание, что контейнер видео не пропорционален 16: 9. Было бы неплохо иметь решение или формулу, которая может работать для всех пропорций.

1 Ответ

0 голосов
/ 15 мая 2018

Если исходное видео по крайней мере горизонтальное, это должно работать.

  1. Проверка высоты контейнера
  2. Рассчитать соотношение сторон видео
  3. Установите высоту iframe равной высоте контейнера и установите ширину, умножив (обращенное) соотношение сторон на ширину контейнера.
  4. Расположите видео абсолютно внутри контейнера, чтобы убедиться, что оно центрировано.

HTML: 

<div class="container">
  <iframe src="https://www.youtube.com/embed/ilxhlnDo7_M" frameborder="0"></iframe>
</div>

CSS: 

.container {
  position: relative;
  overflow: hidden;
  height: 400px; /* whatever you want */
  width: 100%; /* whatever you want */
}

.container iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

JS: 

const container = document.querySelector('.container')
const video = container.querySelector('iframe')
const videoAspectRatio = video.clientWidth / video.clientHeight

video.style.height = `${container.clientHeight}px`
video.style.width = `${container.clientWidth * videoAspectRatio}px`

Кажется, что SO встраивания не поддерживают встраивание YouTube, поэтому я разбил пример на скрипку: https://jsfiddle.net/e5bxpuzf/4/

Прискорбным недостатком является «вспышка нестандартного контента», которую вы получите при изменении размера видео. Я бы рекомендовал добавить видео после его загрузки, чтобы избежать FOUC.

Вот скрипка с несколькими разными контейнерами в качестве примеров. Видео будет 100% высоты контейнера и по центру по горизонтали: https://jsfiddle.net/e5bxpuzf/2/

ПРИМЕЧАНИЕ: Я решил не писать условное выражение, чтобы проверить, больше ли высота видео, чем ширина, потому что кажется, что это будет дополнительный случай. Если вам нужно, я могу обновить скрипку для приспособления.

...