Полноэкранное фоновое видео и держите его по центру

Question

Я пытаюсь создать сайт, на котором у меня есть фоновое видео, воспроизводимое с некоторым HTML5.Все работает отлично, работает так, как я хочу.Но я также хочу, чтобы изображение было в центре экрана, даже когда пользователь изменяет размер браузера.

<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video>

Я получил это для работы с некоторыми jQuery, но мне было интересно, есть ли решение CSS для этого.

function resizeHandler() {
        // scale the video
        var documentHeight = $(document).height();
        var documentWidth = $(document).width();
        var ratio = $('#video').width() / $('#video').height();

        if((documentWidth / documentHeight) < ratio) {
            $('#video').css({
                'width': 'auto',
                'height': '100%',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginRight = $('#video').width() - $(document).width();
            $('#video').css('left', -marginRight);
        } else {
            $('#video').css({
                'width': '100%',
                'height': 'auto',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginTop = $('#video').height() - $(document).height();
            $('#video').css('top', -marginTop);
        }
    }

Это jQuery, который я написал, чтобы растянуть изображение до размера экрана и сохранить изображение в центре.Не уверен, что это возможно в CSS, но если кто-то знает, как это сделать, это может быть хорошо.

Answer 1

Этот вопрос только что был добавлен в Поместите видео со 100% высотой и 100% шириной, используя css или javascript

Я думаю, мой ответ на этот вопрос может быть тем, который вы искали?

Вот код:

header {
    position: relative;
    height: 100vh;
    z-index: 0;
}
header h1 {
    text-align: center;
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
    color: #fff
}
header 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;
}

<header>
    <h1>Sample Title</h1>
	<video autoplay loop class="bg-video">
		<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
	</video>
</header>

А вот пример работающей скрипки .

Надеюсь, это поможет кому-то еще:)

Answer 2

Я бы попытался центрировать видео с абсолютной позицией внутри фиксированной обертки.Например:

Поместите ваше видео в фиксированную оболочку со 100% шириной и высотой:

#video-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Центрируйте видео внутри дополнительногобольшая область с полем auto:

#video {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

И растяните его до полного размера с min-width и min-height:

#video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
} 

---

Вот итоговый результат:

#video-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#video {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;   
}

<div id="video-wrap">
    <video id="video" loop autoplay>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

Здесь также jsfiddle .

Answer 3

Это должно сделать #video всего размера области просмотра и оставаться там, когда пользователь прокручивает.

#video {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

Answer 4

Использовать Css Property.подгонка объекта: обложка;

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

video {
  height: 100%;
  width: 100%;
}

<video controls> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>