Как растянуть видео в css?

@ally 

Для растяжения видео в CSS можно использовать свойство object-fit.

Пример:

HTML:

1
2
3
4

<video id="myVideo" width="100%" height="auto" controls>
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает HTML5 видео.
</video>

CSS:

1
2
3

#myVideo {
  object-fit: fill;
}

В этом примере, видео будет растягиваться по размерам родительского контейнера, так как width="100%" задает ширину в 100% от родительского элемента, а height="auto" позволяет сохранять пропорции видео. Свойство object-fit: fill; растягивает видео так, чтобы оно заполнило заданные размеры, сохраняя при этом пропорции.

Вы можете изменить значение object-fit на другое, чтобы достичь нужного эффекта растяжения, например:

1
2
3

#myVideo {
  object-fit: contain;
}

В этом случае видео будет растягиваться в рамках родительского контейнера так, чтобы поместиться полностью внутрь этого контейнера, сохраняя при этом пропорции.