Чтобы создать адаптивное видео в HTML, вы можете использовать различные методы. Вот несколько популярных подходов:

1. Видеоэлемент HTML5. В HTML5 появился элемент , который позволяет встраивать видео непосредственно на веб-страницу. Чтобы сделать его отзывчивым, вы можете установить для свойства widthзначение «100%» и позволить элементу регулировать свой размер в зависимости от контейнера.

<video src="video.mp4" controls width="100%"></video>

2. CSS Flexbox: вы можете использовать CSS Flexbox для создания адаптивного видеоконтейнера. Установите для свойства отображения контейнера значение «flex» и примените соответствующие свойства гибкости к элементу видео.

центр;
}

3. CSS-сетка: CSS-сетка — еще один вариант создания адаптивного макета видео. Определите контейнер сетки и поместите видеоэлемент в ячейки сетки.

<div class="video-container">
  <video src="video.mp4" controls></video>
</div>
<style>
.video-container {
  display: grid;
  place-items: center;
}
</style>

4. Bootstrap Framework. Если вы используете платформу Bootstrap, вы можете воспользоваться преимуществами ее адаптивной системы сеток и предопределенных классов.

<div class="container">
  <div class="row">
    <div class="col">
      <video src="video.mp4" controls></video>
    </div>
  </div>
</div>