Как: сделать мой видео фон ЦЕНТРАЛЬНЫМ и МАСШТАБИРУЕМЫМ, независимо от размера браузера? - PullRequest
Новая
       40

Как: сделать мой видео фон ЦЕНТРАЛЬНЫМ и МАСШТАБИРУЕМЫМ, независимо от размера браузера?

0 голосов
/ 30 января 2019

Я не могу понять, как отцентрировать фоновое видео, независимо от размера окна браузера.Видео центрируется только тогда, когда браузер развернут на весь экран;1920x1080;или около того.

Я попробовал некоторые решения, которые нашел здесь, но я не могу заставить что-либо работать.Я графический дизайнер, но я могу сделать базовый базовый код ... и редактировать то, что сделали другие люди, и следовать простым инструкциям.Я застрял здесь и был бы очень признателен за любую помощь или совет.Я надеюсь, что есть простое решение ...?Спасибо.

Ниже приведены части кода, которые у меня сейчас есть ...

Вот сайт: http://test2.scottyelle.com

Видео BG, о котором идет речь, находится наtop of index.html - OW.mp4

Я также смотрел на этот вопрос / ответы - HTML5 фоновое видео, держать центр видео в центре 

.video {
position: relative;
height: 40rem;
overflow: hidden;

}
#myVideo {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
}

.video-content {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}




<section class="video home-section home-full-height" id="home">

<video loop autoplay muted playsinline id="myVideo">
<source src="assets/images/Beach/OW.mp4" type="video/mp4">
</video>

<div class="titan-caption">
<div class="caption-content">
<center>
<img class="img-responsive" src="assets/images/logo.svg" height="300px" width="300px"></div>
</center>
</div>
</div>

</section>

Iожидать / нужно, чтобы видео, OW.mp4, отображалось по центру и было масштабируемым, когда пользователи изменяют размер окна браузера и когда сайт просматривается на мобильных устройствах.

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Я использую этот трюк:

HTML 

<div class="video_container">
    <video preload="auto" playsinline="" autoplay="" muted="" loop="" id="heroVideo">
            <source src="path/to/video" type="video/mp4">
            Your browser does not support the video tag.
    </video>
</div>

CSS 

.video_container {
    overflow: hidden;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.video_container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}

Поскольку это должно происходить в задней части тела, убедитесь, чтоАбсолют - это относительное тело (или div, который покрывает bg).

0 голосов
/ 30 января 2019

Вы можете установить width: 100vw для идентификатора #myVideo, чтобы оно соответствовало ширине окна при изменении размера.

...