видео-тег занимает полное пространство браузера

Я пытаюсь, чтобы мое видео занимало весь размер браузера при входе на страницу. Однако я вижу немного следующего <div>видео-тег занимает полное пространство браузера

Вот это HTML для страницы:

Вот это CSS для video-containter:

.video-container { 
    position: relative; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    background: no-repeat; 
    background-size: cover; 
}

<section> с class="index" ничего не содержит:

.index { 

}

источник

2015-11-13 Liondancer

Пожалуйста, оставляйте заполненный код или предоставите демонстрационную версию. – Alex

Возможно, это может вам помочь: http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements – h0ch5tr4355

Использование В.Х. и оч.сл., как @ theStreets93 предложил, но я нахожу, что я получить лучшие результаты, когда он применяется к телу и html, затем создайте дочерний элемент (например, .video-container) на 100%. Изготовление корпуса и html relative и .video-containerabsolute даст вам полный контроль, установив top, bottom, left, и right в 0, но он может растянуть и исказить ваше видео, поэтому отрегулируйте его соответствующим образом. Сбрасывания margin, padding, и border, а также box-sizing: border-box/inherit должны противодействовать UA по умолчанию, как это раздражает 8px margin, добавленный к корпусу.

Я заметил, что в вашем HTML .video-container не является ребенком тела и что у вас также есть несколько детей с телом. Я предлагаю вам обрезать некоторые из лишних элементов и установить требуемые элементы для высоты или высоты строки 0, если это возможно. Вам, возможно, придется развернуть .video-container, если у вас есть возможность. Конечно, вам может не понадобиться делать все это, если остальные элементы статичны (то есть position: static, который по умолчанию). Трудно сказать, так как вы не предоставили надлежащую демонстрацию. : \

html, body { 
    box-sizing: border-box; 
    font: 400 16px/1.45 'Source Code Pro'; 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

.video-container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -100; 
    background: no-repeat; 
    background-size: cover; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
}

источник

2015-11-13 14:11:49 zer00ne

Теперь у меня есть мой CSS установите для этого: http://dpaste.com/2AW34XW Это заполняет страницу браузера, но когда я перетаскиваю браузер. Я замечаю, что текст начинает перекрывать видео. http://postimg.org/image/6ktgk93kx/ – Liondancer

Мне удалось создать jsfiddle !: https://jsfiddle.net/reactjs/69z2wepo/ Если вы перетащили окно. Вы можете видеть, что текст перекрывает видео – Liondancer

http://i.imgur.com/HXRfrTr.png – zer00ne

Вы попробуйте и VW ВХ?

.video-container { 
    width: 100vw; 
    height: 100vh; 
    object-fit: cover; 
    position: relative; 
    background: no-repeat; 
    background-size: cover; 
}

В.Х. (высота окна просмотра)
оч.сл. (ширина окна)

источник

2015-11-13 09:14:47

видео-тег занимает полное пространство браузера

ответ

Смежные вопросы