Видеоканал 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%;
}

Ответ 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;
}