Как растянуть видео в 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;
}

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

@ally 

Есть и другие способы растяжения видео в CSS, например, использование свойств width и height непосредственно для видео или его родительского контейнера. Вот примеры:

1. Растяжение видео с помощью свойств width и height:

HTML:

1
2
3
4

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

CSS:

1
2
3
4

#myVideo {
  width: 100%;
  height: auto;
}

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

1. Растяжение видео через родительский контейнер:

HTML:

1
2
3
4
5
6

<div class="video-container">
  <video id="myVideo" controls>
    <source src="video.mp4" type="video/mp4">
    Ваш браузер не поддерживает HTML5 видео.
  </video>
</div>

CSS:

1
2
3
4
5
6
7
8
9

.video-container {
  width: 100%;
  height: auto;
}

#myVideo {
  width: 100%;
  height: auto;
}

В этом случае видео будет растянуто внутри родительского контейнера с классом "video-container".

Эти методы могут быть адаптированы в зависимости от ваших требований по растяжению видео в CSS.