Блог

Главная - Вопросы по программированию - Как сделать фоновое видео с навигационной панелью 100 Вч на всех устройствах с сохранением соотношения сторон

Как сделать фоновое видео с навигационной панелью 100 Вч на всех устройствах с сохранением соотношения сторон

#html #css #video

#HTML #css #Видео

Вопрос:

Я недавно создал эту домашнюю страницу для клиента:https://www.calklin.com

Я смог сделать видео адаптивным, следуя этому руководству:https://css-tricks.com/fluid-width-video

Однако я пока не смог найти способ сохранить адаптивность видео, при этом 100vh-61px учитывают навигационную панель и поддерживают правильное соотношение сторон.

Благодарен за предложения!

Ответ №1:

Я верю, что вы на правильном пути. Просто у вас, похоже, нет пробелов в вашей функции calc () для высоты. Просто измените это

 .background-video {
    height: calc(100vh-61px) !important;
}

К этому

 .background-video {
    height: calc(100vh - 61px) !important;
}

Вы можете прочитать больше о необходимости добавления пробелов внутри функции calc() в документах Mozilla, в разделе примечания.

Редактировать

Если вы хотите сохранить соотношение сторон видео и сделать его соответствующим образом реагирующим, вы можете использовать это вместо

 .background-video {
    height: calc(100% - 61px) !important;
}

Комментарии:

1. Спасибо за ответ! На самом деле свойство было установлено таким образом намеренно, поскольку оно изменяет соотношение сторон при активации. На данный момент я исправил правило, но, как вы можете видеть, фоновое видео теперь, к сожалению, не масштабируется должным образом,

2. Также правило заполнения сверху: 56,25% (для поддержания соотношения сторон), как рекомендовано в руководстве по ширине жидкости выше, перестает работать после вычисления.

3. Теперь, при дальнейшем уведомлении, я все еще думаю, что ваша проблема сохраняется. Соотношение сторон видео не позволит вам отображать его в том же соотношении, сохраняя навигационную панель одновременно на экране 1920х1080. Нижняя часть видео обрезается, когда вы пытаетесь сохранить соотношение сторон, так как пространство там больше похоже на 17: 9, потому что панель навигации съедает 61 пиксель, в то время как видео только 16: 9. Если мне удастся найти решение, я отредактирую его здесь и дам вам знать. Я полагаю, что на больших экранах, возможно, для сохранения соотношения, вам нужно будет поместить белые полосы слева и справа от видео.

4. Если вы сохраняете соотношение сторон и хотите предотвратить навигационную панель, то результат будет выглядеть примерно так. i.imgur.com/BYoihdR.png

5. Вас интересует этот вид? Любое устройство меньшего размера (то есть меньше 1214 пикселей в моем тесте), очевидно, будет отлично работать без границ слева и справа.