Видеоканал Html5, центр центра видео в центре
Я пытаюсь сохранить фоновые видео в центре независимо от того, насколько большой пользователь перетаскивает видео. В настоящее время он отключает правую сторону видео, когда я прокручиваю меньше. Вот что у меня есть:
<section id="home">
<div class="video_shader"></div>
<div class="video_contain">
<video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
<source src="/realWebm.webm" type="video/webm" />
<source src="/realdeal.mp4" type="video/mp4">
<source src="/reaOg.ogv" type="video/ogg" />
</video>
</div>
</section>
.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
video {
min-width: 100%;
min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}
#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}
Я хотел бы, чтобы центр видео всегда был центром страницы, даже если стороны обрезаны - это действительно идеально, если это происходит именно так. Поблагодарили бы за любую помощь. Спасибо за чтение!
Ответы
Ответ 1
здесь, как обычно я делаю фоновое видео, и как я это сделал для целевой страницы stre.am:
.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
![stream fs vid for mobile]()
Ответ 2
В моем случае использования, когда я всегда хотел, чтобы видео охватывало весь видовой экран (независимо от того, было ли соотношение сторон видового экрана больше или меньше, чем видео), вышеупомянутое решение не работало точно так, как я предполагал. Вместо этого, работала намного лучше:
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.video-container > video {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
@media screen and (max-aspect-ratio: 1920/1080) {
.video-container > video {
height: 100%;
}
}
@media screen and (min-aspect-ratio: 1920/1080) {
.video-container > video {
width: 100%;
}
}
Мое видео было 1920x1080, и это работает в IE11 (не тестировалось ниже) и дальше.
Ответ 3
Это намного короче и сработало для меня.
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
}
Ответ 4
Это сработало для меня
.video_contain {
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: none;
}
#bgvid {
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: visible;
width: 1267px;
height: auto;
}
Ответ 5
Это намного короче и сработало для меня.
видео {позиция: фиксированная; право: 0; bottom: 0; мин-ширина: 100%; мин-высота: 100%; transform: translateX (calc ((100% - 100vw)/2)); }
могу я поцеловать тебя @Pezcraft? <3 Ты сделал мой день, я могу закончить свой день раньше сегодня :)
Ответ 6
Это помогло мне, сохраняя видео все время по центру и не беспокоясь о реальных размерах видео
.video_contain {
position: absolute;
top: 0;
left: 0;
/** could be any size **/
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
video {
display: block;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}