it-swarm.com.de

Wie zentriere ich HTML5-Videos?

Ich mache nur ein bisschen HTML5 und habe versucht, ein Video auf der Seite zu zentrieren. Aus irgendeinem Grund kann ich es nicht zum Zentrum bringen. Ich habe versucht, dem Video-Tag selbst eine Klasse hinzuzufügen, und ich habe das Video in eine separate div verpackt. Das Video bleibt jedoch auf der linken Seite.

<!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>

Ich weiß, das muss etwas sein, das ich in den frühen Morgenstunden übersehen habe, aber jede Hilfe wäre dankbar. 

Vielen Dank

37
snowBlind

Die Mittelklasse muss eine Breite haben, damit der automatische Rand funktioniert:

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

Dann würde ich die Center-Klasse auf das Video selbst anwenden, nicht auf einen Container:

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

Ich hatte das gleiche Problem, bis mir klar wurde, dass <video>-Elemente Inline-Elemente sind, keine Blockelemente . Sie müssen nur für das Containerelement text-align: center; festlegen, um das Video horizontal auf der Seite zu zentrieren.

32
djpMusic

HTML QUELLTEXT:

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

CSS-Code:

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

Mach das:

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

Funktioniert perfekt! : D

11
mehulmpt

Ich hatte das gleiche Problem. Das hat für mich funktioniert:

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

Ich werde es nicht vorziehen, nur das Video-Tag zu verwenden, wie @ user142019 sagt. Ich werde es lieber so machen:

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

Dadurch wird Ihr Video ansprechbar. Gleichzeitig hat das Bedienfeld die gleiche Größe wie das Video-Rechteck.

@snowBlind Im ersten Beispiel, das Sie angegeben haben, sollten Ihre Stilregeln in einem <style> -Tag und nicht in einem <script> -Tag enthalten sein:

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

Ich habe auch die Änderungen ausprobiert, die in this answer erwähnt wurden (siehe Ergebnisse unter http://jsfiddle.net/8cXqQ/7/ ), aber sie scheinen immer noch nicht zu funktionieren.

Sie können das Video mit einem Div umgeben und Breite und automatische Ränder auf das Div anwenden, um das Video zu zentrieren (zusammen mit dem Breitenattribut für das Video siehe Ergebnisse unter http://jsfiddle.net/8cXqQ/9/ ). .

Aber das scheint nicht die einfachste Lösung zu sein ... sollten wir nicht in der Lage sein, ein Video zu zentrieren, ohne es in ein Container div packen muss?

2
user456814

Versuche dies:

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

Verwenden Sie die Ränder. <video> ist ein Inline-Element, daher müssen Sie display block; zur Klasse css hinzufügen.

Sie können bestimmte mit verwenden, aber ich würde keine px-Werte verwenden. Verwenden Sie%, um es ansprechbar zu machen, wie zum Beispiel:

width: 50%;

Dadurch wird das Video halb so groß wie das Bildfenster.

Sehen Sie sich die Originaldokumentation hier an. 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;
    }
<!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>

Den Code finden Sie hier für mehr Verständnis.

Sie können den Code online anzeigen Fiddle

1
Renato Lazaro

Alles, was Sie tun müssen, ist, Ihren Video-Tag auf display:block; FTW zu setzen. Der Standardwert ist inline-block FTL.

Versuche dies

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

Bei der Überarbeitung einer Website in Dreamweaver hatte ich ein ähnliches Problem. Die Site-Struktur basiert auf einem komplexen Satz von Tabellen. Dieses Video befand sich in einer der Hauptlayoutzellen. Ich habe eine verschachtelte Tabelle nur für das Video erstellt und der neuen Tabelle ein align=center-Attribut hinzugefügt:

<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

Wenn Sie eine Breite in Prozent haben, können Sie Folgendes tun:

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
.center { width:500px; margin-right:auto; margin-left:auto; }
0
0xAli

Ich habe diese Seite gefunden, als ich versuchte, zwei Videos zu zentrieren. Wenn ich also beide Videos in eine Mitte div (die ich zentral genannt habe) einschließt, funktioniert der Randtrick, aber die Breite ist wichtig (2 Videos bei 400 + Auffüllen usw.)

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

Arbeitete für mich!

0
drmarkreuter