Почему видео на сайте становится не сверху, а поверх другого контента?
Видео становится поверх всего, а мне нужно сверху.
HTML:
<div class="bgvideo"> <video src="static/video/water.mp4" type="video/mp4" autoplay muted loop></video> <div class="video-text"> <h1>Future's here</h1> </div> </div> |
<div class="bgvideo"> <video src="static/video/water.mp4" type="video/mp4" autoplay muted loop></video> <div class="video-text"> <h1>Future's here</h1> </div> </div>
CSS:
.bgvideo video { height: 70vh; width: 100%; position: relative; display: flex; justify-content: center; align-items: center; } .bgvideo { height: 70vh; width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; z-index: 1; } .video-text { color: aqua; z-index: 2; } |
.bgvideo video { height: 70vh; width: 100%; position: relative; display: flex; justify-content: center; align-items: center; } .bgvideo { height: 70vh; width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; z-index: 1; } .video-text { color: aqua; z-index: 2; }
Дополнительно:
Фото не получается приложить, пишет: "Не удалось загрузить файл."
position: absolute; top: 0; left: 0; |
position: absolute; top: 0; left: 0;
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда видео на сайте отображается поверх другого контента, может быть вызвана несколькими причинами. Одной из возможных причин может быть неправильно заданный CSS стиль для видео элемента, который устанавливает его позицию поверх других элементов.
Чтобы исправить эту проблему, вам необходимо убедиться, что стили для видео элемента правильно настроены. Вам нужно убедиться, что у видео элемента есть правильные значения для свойств position и z-index. Например, чтобы видео отображалось сверху другого контента, вы можете установить для него значение position: absolute и z-index: 9999 (или другое высокое значение).
Пример правильного CSS для видео элемента:
video { position: absolute; z-index: 9999; }
Если проблема все еще остается, возможно, что другие стили или скрипты на вашем сайте также могут влиять на отображение видео. Проверьте другие стили и скрипты на вашем сайте, которые могут влиять на отображение видео элемента, и убедитесь, что они не пересекаются с вашими стилями для видео.
Если после всех этих действий проблема все еще остается, вам может потребоваться обратиться к разработчику или специалисту по веб-разработке для более тщательного анализа проблемы.