Как реплицировать фоновый размер:обложку на элементах

При работе с HTML-элементами, такими как

CSS-подход

Используя только CSS, вы можете создать идеальную имитацию обложки для видео, не полагаясь на сценарии. Хитрость заключается в точном расчете ширины и высоты видео относительно соотношения сторон родительского элемента. Например, если соотношение сторон вашего видео 16:9:

.parent-element-to-video {
  overflow: hidden;
}
video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}

Центрирование видео

Если вам также необходимо центрировать видео, следующий CSS обеспечит надежный подход:

/* merge with above CSS */
.parent-element-to-video {
  position: relative; /* or absolute or fixed */
}
video {
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}

Соображения совместимости

Хотя это решение безупречно работает в браузерах, совместимых с CSS3, старым браузерам может потребоваться подход на основе сценариев для достижения желаемого результата.