Чтобы добавить видео MP4 с помощью CSS, вы можете использовать различные методы. Вот несколько вариантов:

1. Использование элемента . Вы можете использовать элемент в HTML и применять к нему стили CSS. Вот пример:

<video class="video-container">
  <source src="video.mp4" type="video/mp4">
</video>

CSS:

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

2. Фоновое видео с помощью CSS. Вы также можете установить видео в качестве фона элемента с помощью CSS. Вот пример:

HTML:

<div class="video-background">
  <div class="video-overlay"></div>
</div>

CSS:

.video-background {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(video.mp4) no-repeat center center fixed;
  background-size: cover;
}

3. CSS-анимация. Вы можете использовать CSS-анимацию для создания видеоэффектов. Этот метод предполагает использование серии изображений для имитации видео. Вот пример:

HTML:

<div class="video-animation"></div>

CSS:

.video-animation {
  width: 100%;
  height: auto;
  background: url(frame1.jpg);
  animation: play-video 5s steps(20) infinite;
}
@keyframes play-video {
  0% { background-image: url(frame1.jpg); }
  5% { background-image: url(frame2.jpg); }
  /* Add more frames as necessary */
  100% { background-image: url(frame20.jpg); }
}

Это всего лишь несколько способов добавить видео MP4 с помощью CSS. Не забудьте заменить URL-адреса «video.mp4» и других изображений соответствующими путями к видео и изображениям.