it-swarm.com.de

Html5-Videohintergrund, Mitte des Videos in der Mitte halten

Ich versuche, ein Hintergrundvideo zentriert zu halten, unabhängig davon, wie groß der Benutzer das Video zieht. Es schneidet momentan die rechte Seite der Videos ab, wenn ich kleiner scrolle. Folgendes habe ich:

<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;
}

Ich möchte, dass die Mitte des Videos immer die Mitte der Seite ist, auch wenn die Seiten abgeschnitten werden - das ist eigentlich ideal, wenn dies so geschieht. Würde mich über jede Hilfe freuen. Danke fürs Lesen!

23
ajmajmajma

so mache ich normalerweise ein Hintergrundvideo und wie habe ich es für die Zielseite stream gemacht:

.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

37
Todd

In meinem Anwendungsfall, in dem ich immer wollte, dass das Video das gesamte Ansichtsfenster abdeckt (unabhängig davon, ob das Seitenverhältnis des Ansichtsfensters größer oder kleiner als die Videos ist), funktionierte die oben genannte Lösung nicht genau so, wie ich es beabsichtigt hatte. Stattdessen funktionierte Folgendes viel besser:

.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%;
  }
}

Mein Video war 1920x1080, und dies funktioniert in IE11 (nicht niedriger getestet) und darüber hinaus.

12
lohfu

Das ist viel kürzer und hat bei mir funktioniert.

video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
}
10
Pezcraft

Das hat bei mir funktioniert

.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;
}
1
Sritam

Das hat mir geholfen, das Video immer zentriert zu halten und mich nicht um die tatsächlichen Abmessungen des Videos zu kümmern

.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;
}
0
Jair Reina