Html5 vidéo d'arrière-plan, garder le centre de la vidéo dans le centre

J'essaie de garder une vidéo d'arrière-plan centré peu importe comment grand l'utilisateur fait glisser la vidéo. Il est actuellement en coupant le côté droit de l'vidéos quand je scroll plus petits. Voici ce que j'ai:

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

Je voudrais le centre de la vidéo pour être le centre de la page pour toujours, même si les côtés coupés qui est en fait idéal, si cela se passe de cette façon. Serais reconnaissant de toute aide. Merci pour la lecture!

InformationsquelleAutor ajmajmajma | 2015-01-08

37

voici comment j'ai généralement en arrière-plan de la vidéo, et comment je l'ai fait pour le stre.suis page d'atterrissage:
```
.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%;
}
```
- Cela fonctionne très bien jusqu'à ce que je frappe mobile tailles. Toutes les suggestions? Merci!
- Il ne devrait pas se comporter différemment au mobile tailles. assurez-vous que vous n'avez pas de requête de média styles interférents. J'ai joint une photo de ce à quoi il DEVRAIT ressembler à mobile tailles.
InformationsquelleAutor Todd
13

C'est beaucoup plus courte et a travaillé pour moi.
```
video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
}
```
- Absolument la meilleure réponse @Pezcraft. Dans mon cas, j'avais besoin d'inclure deux lignes de ton code et cela a fonctionné parfaitement pour moi. Je vous remercie beaucoup pour votre contribution.
- Fonctionne parfaitement. Je devine que vous avez obtenu le code d'origine de W3Schools. J'ai tout ajouter la transformation de la propriété et de ma vidéo est exactement la façon dont je le veux. Merci!
- Cela crée un drôle de débordement sur le côté droit (vidéo largeur > 100%).
InformationsquelleAutor Pezcraft
12

Dans mon cas d'utilisation où j'ai toujours voulu la vidéo pour couvrir la totalité de la fenêtre d'affichage (peu importe si la fenêtre d'affichage rapport d'aspect était plus grand ou plus faible que les vidéos), la solution ci-dessus ne fonctionne pas exactement comment je l'ai prévu. Au lieu de cela, la suite travaillé beaucoup mieux:
```
.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%;
  }
}
```
Ma vidéo 1920x1080, et cela fonctionne dans IE11 (pas de test plus bas), et au-delà.
- Le mieux fonctionné pour moi aussi, c'est une excellente façon d'utiliser les media queries! J'ai ajouté overflow:hidden; pour .vidéo-récipient pour éviter le défilement sur mobile
- Je voudrais appliquer un position:fixed sur le .vidéo-conteneur.
InformationsquelleAutor lohfu

Cela a fonctionné pour moi

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

InformationsquelleAutor Sritam

Utilisation object-fit: cover;

video {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}

InformationsquelleAutor zavidovych

Cela a fonctionné pour moi, en gardant la vidéo centrée tous les temps et de ne pas se soucier des dimensions réelles de la vidéo

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

InformationsquelleAutor Jair Reina

J'ai donc testé les solutions ci-dessus et ne pouvait pas trouver que, donc voici la mienne:

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

InformationsquelleAutor Konowy

Vous devez vous connecter pour publier un commentaire.