Zentrieren ein Video in HTML

1. Verwenden Sie die CSS-Eigenschaften margin, width und display, um das Video in HTML zu zentrieren
2. Verwenden Sie das center-Tag, um das Video in HTML zu zentrieren
3. Verwenden Sie die CSS-Eigenschaft text-align, um Videos in HTML zu zentrieren

In diesem Tutorial werden einige Methoden zum Zentrieren eines Videos in HTML erläutert.

Verwenden Sie die CSS-Eigenschaften margin, width und display, um das Video in HTML zu zentrieren

Wir können die Kombination der CSS-Eigenschaften margin, width und display verwenden, um ein Video in HTML zu zentrieren. Wir verwenden die Eigenschaft margin, um den Rand eines Elements in alle vier Richtungen festzulegen.

Wir werden die Eigenschaft verwenden, um bei dieser Methode eine Marge auf das video-Tag anzuwenden. Wir können die Eigenschaft width verwenden, um einem Element eine bestimmte Breite zu geben.

Wir können die Breite in verschiedenen Einheiten wie px, em und sogar in Prozent einstellen. Wir werden den Unterschied zwischen der Verwendung dieser Einheiten im folgenden Beispiel sehen.

Die Eigenschaft display ist wesentlich, um die Verhaltensanzeige des ausgewählten Elements einzustellen. Es nimmt die Werte wie block, inline-block und inline an.

Schließlich verwenden wir das video-Tag, um ein Video in HTML einzufügen.

Schreiben Sie zum Beispiel ein video-Tag in HTML mit einer Klasse center. Geben Sie zunächst im Attribut src die korrekte URL der Videodatei an.

Schreiben Sie als nächstes das Attribut controls und schließen Sie das Tag video. Wählen Sie in CSS das Tag center und wenden Sie die Eigenschaft margin an.

Setzen Sie den Wert der Eigenschaft auf 0 auto und geben Sie als Videobreite 300px an. Setzen Sie abschließend die Eigenschaft display auf block.

Nun werden wir beschreiben, was wir in den obigen Schritten getan haben. Das Attribut controls im Tag video zeigt die Steuerelemente zum Anhalten, Abspielen, Verschieben, Erhöhen und Verringern der Lautstärke und zum Umschalten in den Vollbildmodus an.

Wenn wir das Attribut controls aus dem Tag entfernen, verschwindet die Controlbar im Video.

Die CSS-Eigenschaft margin setzt den oberen und unteren Rand auf 0. Die Ränder left und right sind auf auto eingestellt.

Das bedeutet, dass das Video die angegebene Breite von 300px einnimmt und der Rest des Platzes gleichmäßig aufgeteilt und als linker und rechter Rand festgelegt wird.

Das Videoelement wird als Element auf Blockebene festgelegt, sodass das Video den Platz des gesamten Blocks einnimmt. Es ermöglicht, dass die vorausgehenden Eigenschaften wirksam werden.

Daher können wir ein Video in HTML zentrieren, indem wir die CSS-Eigenschaften wie die Eigenschaften margin, width und display verwenden.

Beispielcode:

<video class="center" src="pointing_pink.mp4" controls></video>

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

Dieses Verfahren hat jedoch einen Nachteil. Im obigen Beispiel haben wir die Einheit px in width verwendet.

Wenn wir die Größe des Browserfensters ändern oder die Website von der mobilen Ansicht aus durchsuchen, reagiert das Video nicht.

Wir können % oder vw in der Eigenschaft width verwenden, um dieses Problem zu lösen. Wenn wir diese Einheiten verwenden, reagiert das Videoelement.

Sehen wir uns das Beispiel unten an.

.center{
 margin: 0 auto;
 width: 40%;
 /* widht:40vw */
 display: block;
}

Verwenden Sie das center-Tag, um das Video in HTML zu zentrieren

Wir können auch das HTML-Tag center verwenden, um ein Element in HTML zu zentrieren.

Das Tag wurde bis HTML4 verwendet. Die modernen Browser unterstützen das Tag nicht.

Einige ältere Browser unterstützen es jedoch noch. Daher wird davon abgeraten, das center-Tag zu verwenden, um ein Element in HTML zu zentrieren.

Wie auch immer, wir werden uns die Verwendung des Tags ansehen, um ein Video in diesem Abschnitt zu zentrieren.

Erstellen Sie beispielsweise ein video-Tag und fügen Sie ein Video ein. Verwenden Sie die Eigenschaft width, um dem Video eine bestimmte Breite zu geben.

Umschließen Sie als Nächstes das Tag video mit dem Tag center. Daher wird das Video zentriert.

<center>
 <video class="center" src="pointing_pink.mp4" controls width="300"> </video>
</center>

Verwenden Sie die CSS-Eigenschaft text-align, um Videos in HTML zu zentrieren

Wie bereits erwähnt, wird von der Verwendung des center-Tags abgeraten. Eine Alternative zum Tag center ist die Verwendung der CSS-Eigenschaft text-align.

Wir können die Eigenschaft text-align so einstellen, dass das Element in der Mitte zentriert wird. Wir können diese Technik implementieren, um das Video zu zentrieren.

Dann können wir das Video in einen Container packen und die Stile anwenden.

Erstellen Sie beispielsweise ein div mit der Klasse center. Erstellen Sie innerhalb des div ein video-Tag, um das Video einzufügen.

Sie können die Breite des Videos entweder in HTML festlegen oder die CSS-Eigenschaft width verwenden. Wählen Sie in CSS die Klasse center und setzen Sie die Eigenschaft text-align auf center.

Dadurch wird das Video zentriert.

Beispielcode:

 <div class="center">
 <video src="pointing_pink.mp4" controls width="400"></video>
 </div>

.center{
 text-align: center;
}

In diesem Artikel haben wir drei verschiedene Möglichkeiten kennengelernt, ein Video in HTML zu zentrieren. Wir haben die Eigenschaft margin, das Tag center und die Eigenschaft text-align verwendet, um das Video in HTML zu zentrieren.