Comment centrer les vidéos HTML5 ?

Question

Je m'amuse simplement avec du HTML5, et j'essayais de centrer une vidéo sur la page. Pour une raison quelconque, je n'arrive pas à la centrer. J'ai essayé d'ajouter une classe à la balise vidéo elle-même, et j'ai enveloppé la vidéo dans un div séparé. Cependant, la vidéo reste à gauche.

    Test

    .center {
      margin: 0 auto;
    }

        Votre navigateur ne supporte pas la balise vidéo.

Je sais que cela doit être quelque chose que je néglige dans les petites heures du matin, mais toute aide serait appréciée.

Merci

Answer 1

Si vous avez une largeur en pourcentage, vous pouvez faire ceci :

video {
  width: 50% !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}

      Votre navigateur ne prend pas en charge la vidéo HTML5.

Answer 2

Utilisez des marges est un élément en ligne, vous devrez donc ajouter display block; à votre classe css.

Vous pouvez utiliser une largeur spécifique, mais je n'utiliserais pas de valeurs en pixels. Utilisez % pour le rendre responsive, comme :

width: 50%;

Cela rendra la vidéo à moitié de la largeur du viewport.

Consultez la documentation originale ici O World Wide Web Consortium W3C

mystyle.css

video {
      width: 50% !important;
      height: auto !important;
      margin: 0 auto;
      display: block;
    }

    h1 {
      text-align: center;
      color: #C42021;
      font-size: 20px;
    }

              Test

                 Comment centrer une vidéo

Consultez le code prêt ici pour une meilleure compréhension.

Vous pouvez voir le code en ligne sur Fiddle

Answer 3

Encapsulez votre dans les balises

,fonctionne également.

Answer 4

.centre { largeur:500px; marge-droite:auto; marge-gauche:auto; }

Answer 5

J'ai trouvé cette page en essayant de centrer un pair de vidéos. Donc, si j'encadre les deux vidéos dans un div centré (que j'ai appelé central), le truc de la marge fonctionne, mais la largeur est importante (2 vidéos à 400 + padding etc)

div.central { 
  margin: 0 auto;
  width: 880px; <!--cette valeur doit être plus grande que les deux vidéos + padding etc-->
}

A fonctionné pour moi!