Почему мое видео вылезает за пределы доступного, появляется скролл и не работает текст?
Я знаю, что есть похожий вопрос, но я уже все перепробовала. Подскажите, пожалуйста)
Html:
<section> <video autoplay muted loop id="myVideo"> <source src="video/video.mp4" type="video/mp4"> </video> <div class="text"> <h1>TEXT</h1> </div> </section> |
<section> <video autoplay muted loop id="myVideo"> <source src="video/video.mp4" type="video/mp4"> </video> <div class="text"> <h1>TEXT</h1> </div> </section>
css
.section { width: 100%; height: 100vh; background: #ff6803; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } #myVideo { width: 100%; position: absolute; top: 0; left: 0; } .text { color: #ffffff; z-index: 10; position: relative; font-size: 48px; } |
.section { width: 100%; height: 100vh; background: #ff6803; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } #myVideo { width: 100%; position: absolute; top: 0; left: 0; } .text { color: #ffffff; z-index: 10; position: relative; font-size: 48px; }
я хочу, чтобы этот непонятный скролл исчез, а текст стал поверх. Не понимаю почему к нему не применяются стили. Если ошибка в путях, то вот так расположены файлы:
C:UsersalenaOneDriveРабочий столzпортфолиоvideo
Дополнительно:
Почему мое видео вылезает за пределы доступного
А где сказано, какого размера оно должно быть?
Для наложения блоков используйте гриды, абсолюты тут лишние.
Чтобы понять почему текст сейчас не поверх, загуглите "контекст наложения".
2. Зачем вообще использовать абсолютное позиционирование?
Ответы:
Почему вы обращаетесь к секции как к классу?
Удалите точку вначале, либо дайте секции класс
У вас текст в диве, если я не ошибаюсь надо писать
.text h1{
Стили
}
- В целом, текст должен и так работать, скорее всего вся ошибка в секции
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда видео выходит за пределы доступного пространства и появляется скролл, обычно связана с неправильными значениями ширины и высоты элемента видео в коде HTML или CSS. Вот несколько шагов, которые могут помочь вам решить эту проблему:
1. Проверьте значения ширины и высоты видео в вашем коде HTML. Убедитесь, что они не превышают ширину и высоту доступного пространства на странице. Например, если у вас есть видео с шириной 100% и высотой 100%, оно может выйти за пределы доступного пространства.
2. Используйте CSS для задания конкретных значений ширины и высоты видео. Например, вы можете использовать свойство max-width для ограничения ширины видео до определенного значения, чтобы избежать появления горизонтального скролла.
3. Проверьте другие стили CSS, которые могут влиять на размеры видео, такие как отступы и паддинги. Убедитесь, что они не мешают корректному отображению видео.
Пример кода CSS для ограничения ширины видео:
video { max-width: 100%; /* ограничиваем ширину видео до 100% */ height: auto; /* автоматически подстраиваем высоту видео */ }
Если после выполнения этих шагов проблема не решится, попробуйте также проверить наличие других элементов на странице, которые могут влиять на размеры видео, и протестируйте вашу страницу в различных браузерах, чтобы убедиться, что проблема не связана с особенностями отображения.