Центрирование полного окна видео

Question

Я пытаюсь получить видео HTML5, чтобы действовать точно так же, как элемент background: center center fixed; background-size: cover; без использования JS (я знаю, что есть JS-библиотеки, которые делают это там). Я выяснил, как установить ширину или высоту на 100% в зависимости от соотношения сторон окна по сравнению с соотношением сторон видео, используя медиа-запросы (пример ниже предполагает, что вы используете 16/9 видео). Все, что мне осталось сделать - это получить видеоцентр в горизонтальном или вертикальном направлении.

Любая помощь будет оценена по достоинству.

@media screen and (max-aspect-ratio: 16/9) { 
    div#fixed video { 
    position: absolute; 
    height: 100%; 
    z-index: -100; 
    } 
} 

@media screen and (min-aspect-ratio: 16/9) { 
    div#fixed video { 
    position: absolute; 
    width: 100%; 
    z-index: -100; 
    } 
} 

Answer 1

@media screen and (max-aspect-ratio: 16/9) { 
    div#fixed video { 
    position: absolute; 
    height: 100%; 
    z-index: -100; 
    top: 0; 
    bottom: 0; 
    margin:auto 0; 
    } 
} 

@media screen and (min-aspect-ratio: 16/9) { 
    div#fixed video { 
    position: absolute; 
    width: 100%; 
    z-index: -100; 
    text-align: left; 
    right: 0; 
    left: 0; 
    margin:0 auto; 
    } 
} 

Answer 2

Вам даже не нужно медиазапросы для достижения этой цели :)

Попробуйте это:

#fixed { 
 
    position: relative; 
 
    height: 100vh; 
 
    z-index: 0; 
 
} 
 
#fixed video { 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -o-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
}

<div id="fixed"> 
 
\t <video autoplay loop class="bg-video"> 
 
\t \t <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4"> 
 
\t </video> 
 
</div>

Вот working fiddle example.

Надеется, что это помогает :)