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

J'avais le même problème. Cela a fonctionné pour moi :

.center {
    margin: 0 auto; 
    width: 400px;
    **display:block**
 }

Answer 2

Essayer ceci :

Video {
affichage : bloc ;
marge : 0 auto ;
}

Answer 3

@snowBlind Dans le premier exemple que vous avez donné, vos règles de style devraient être dans une balise , pas dans une balise <script>:</p> <pre><code><style type="text/css"> .center { margin: 0 auto; }

Aussi, j'ai essayé les modifications mentionnées dans cette réponse (voir les résultats sur http://jsfiddle.net/8cXqQ/7/), mais elles ne semblent toujours pas fonctionner.

Vous pouvez entourer la vidéo avec une div et appliquer une largeur et des marges automatiques à la div pour centrer la vidéo (en spécifiant également l'attribut de largeur pour la vidéo, voir les résultats sur http://jsfiddle.net/8cXqQ/9/).

Mais cela ne semble pas être la solution la plus simple...ne devrions-nous pas pouvoir centrer une vidéo sans avoir à l'encadrer dans une div de conteneur ?

Answer 4

J'ai rencontré un problème similaire lors de la refonte d'un site web dans Dreamweaver. La structure du site est basée sur un ensemble complexe de tableaux, et cette vidéo se trouvait dans l'une des cellules de mise en page principales. J'ai créé un tableau imbriqué juste pour la vidéo, puis j'ai ajouté un attribut align=center au nouveau tableau :

        Si la vidéo n'est pas visible, votre navigateur ne prend pas en charge la vidéo HTML5

Answer 5

Tout ce que vous avez à faire est de définir votre balise vidéo sur display:block; FTW par défaut c'est inline-block FTL.

Essayez ceci

.center {
  margin: 0 auto;
  width: (ce que vous voulez);
  display: block;
}