web-dev-qa-db-fra.com

Comment centrer les vidéos HTML5?

Je suis juste en train de déconner avec du HTML5 et j'essayais de centrer une vidéo sur la page. Pour une raison quelconque, je ne peux pas le centrer. J'ai essayé d'ajouter une classe à la balise video elle-même et j'ai enveloppé la vidéo dans une variable div. Cependant, la vidéo reste à gauche.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test</title>
    <script type="text/css">
    .center {
      margin: 0 auto;
    }
    </script>
  </head>
  <body>
    <div class="center">
      <video controls="controls">
        <source src="/media/MVI_2563.ogg" type="video/ogg" />
        Your browser does not support the video tag.
      </video>
    </div>
  </body>
</html>

Je sais que je dois oublier cela aux petites heures du matin, mais toute aide serait la bienvenue. 

Merci

htmlcsshtml5video
37
snowBlind

La classe center doit avoir une largeur pour que la marge automatique fonctionne:

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

Ensuite, j'appliquerais la classe centrale à la vidéo elle-même, et non à un conteneur:

<video class='center' …>…</video>
31
user142019

J'avais le même problème jusqu'à ce que je réalise que les éléments <video> sont des éléments en ligne, pas des éléments de bloc . text-align: center; est nécessaire pour que l'élément conteneur soit centré horizontalement sur la page.

32
djpMusic

CODE HTML:

<div>
 <video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600"></video>
</div>

CODE CSS:

.center {
    margin-left: auto;
    margin-right: auto;
    display: block
}
28
badr

Faire ceci:

<video style="display:block; margin: 0 auto;" controls>....</video>

Fonctionne parfaitement! :RÉ

11
mehulmpt

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

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

Je ne préférerais pas me concentrer uniquement sur l’utilisation de balises vidéo, comme le dit @ user142019. Je préférerais le faire comme ça:

.videoDiv
{
    width: 70%; /*or whatever % you prefer*/
    margin: 0 auto;
    display: block;
}
<div class="videoDiv">
  <video width="100%" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support the video tag.
  </video>
</div>

Cela rendra votre vidéo sensible en même temps que le panneau des contrôles aura la même taille que le rectangle vidéo (j'ai essayé de dire ce que @ user142019 avait écrit et la vidéo était centrée, mais elle avait l'air moche dans Google Chrome).

3
Juan Ignacio Avendaño Huergo

@snowBlind Dans le premier exemple que vous avez donné, vos règles de style doivent aller dans une balise <style>, pas une balise <script>:

<style type="text/css">
  .center {
    margin: 0 auto;
  }
</style>

De plus, 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 d'une div et appliquer une largeur et des marges automatiques à la div pour centrer la vidéo (en spécifiant l'attribut width pour la vidéo, voir les résultats à l'adresse http://jsfiddle.net/8cXqQ/9/ ). .

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

2
user456814

Essaye ça:

video {
display:block;
margin:0 auto;
}
2
nikkor

Utiliser des marges <video> est un élément en ligne, vous devez donc ajouter display block; à votre classe css.

Vous pouvez utiliser spécifique avec, mais je n’utiliserais pas les valeurs px. Utilisez% pour le rendre réactif, comme:

width: 50%;

La vidéo sera réduite de moitié par la largeur de la fenêtre.

Voir la documentation originale ici O Consortium World Wide Web W3C

mystyle.css

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

    h1 {
      text-align: center;
      color: #C42021;
      font-size: 20px;
    }
<!DOCTYPE html>
        <html>
           <head>
              <meta charset="UTF-8">
              <title>Test</title>
               <link rel="stylesheet" type="text/css" href="mystyle.css">
           </head>
           <body>
              <h1>
                 How do you center a video 
              </h1>
              <div class="center">
                 <video controls="controls">
                    <source src="https://repositorio.ufsc.br/xmlui/bitstream/handle/123456789/100149/Vídeo%20convertido.mp4" type="video/mp4" />
                 </video>
              </div>
           </body>
        </html>

Voir le code prêt ici pour plus de compréhension.

Vous pouvez voir le code en ligne Fiddle

1
Renato Lazaro

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

Essaye ça

.center {
  margin: 0 auto;
  width: (whatever you want);
  display: block;
}
1
user3529598

J'ai eu un problème similaire lors de la refonte d'un site Web dans Dreamweaver. La structure du site repose sur un ensemble complexe de tableaux et cette vidéo figurait dans l'une des cellules de présentation principales. J'ai créé une table imbriquée uniquement pour la vidéo, puis j'ai ajouté un attribut align=center à la nouvelle table:

<table align=center><tr><td>
    <video width=420 height=236 controls="controls" autoplay="autoplay">
        <source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="video/video.webm" type='video/webm' >
        <source src="video/video.mp4" type='video/mp4'>
        <p class="sidebar">If video is not visible, your browser does not support HTML5 video</p>
    </video>
</td></tr></table>
1
Moose-Anne Squirrel

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

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

<body>

  <video controls>
    <source src="http://www.nasa.gov/downloadable/videos/sciencecasts-_total_Eclipse_of_the_moon.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>

</body>

</html>

1
Sébastien Gicquel
.center { width:500px; margin-right:auto; margin-left:auto; }
0
0xAli

J'ai trouvé cette page en essayant de centrer une paire de vidéos. Donc, si je joins les deux vidéos dans une div centrale (que j’ai appelée centrale), le truc de la marge fonctionne, mais la largeur est importante (2 vidéos à 400 + padding, etc.)

<div class=central>
    <video id="vid1" width="400" controls>
        <source src="Carnival01.mp4" type="video/mp4">
    </video> 

    <video id="vid2" width="400" controls>
        <source src="Carnival02.mp4" type="video/mp4">
    </video>
</div>

<style>
div.central { 
  margin: 0 auto;
  width: 880px; <!--this value must be larger than both videos + padding etc-->
}
</style>

Travaillé pour moi!

0
drmarkreuter