Zentrierung klappt nicht & einzelne Bedienelemente ein bzw. ausblenden

Question

Ich würde mein Video gerne zentriert darstellen.
Leider scheint mein Code nicht ganz zu stimmen:

Außerdem würde ich bei Bedienelemente ausblenden gerne nur die Vorspul_Option ausblenden.
Der Start- & Stoppknopf möchte ich angezeigt lassen.

Ist das möglich?

<div style="text-align: center; margin:80px 0">
<video width="512" height="288" controls controlsList="nodownload" id="stimulus">
  <source src="BA_Leibniz_Schwach.mp4" type="video/mp4" />
  <source src="BA_Leibniz_Schwach.webm" type="video/webm" />
<source src="BA_Leibniz_Schwach.ogg" type="video/ogg" />
</video>
</div>

<script type="text/javascript">
<!--
 
var video = document.getElementById("stimulus");
 
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});
 
// -->
</script>

Vielen Dank für Ihre Hilfe!

Answer 1

Ein Video ist kein Text, deshalb funktioniert text-align nicht.

Ja, schon klar, das ist nicht besonders hilfreich. Genauer müsste es heißen, dass das Video ein HTML-Blockelement ist und kein Inline-Element, weshalb die Zentrierung so nicht funktioniert.

Die Lösung ist ein margin: 0 auto:

<video style="margin: 0 auto" width="512" height="288" controls controlsList="nodownload" id="stimulus">

Wenn Sie ohnehin schon einen margin im Video-Element haben, können Sie dort natürlich auch die 80 Pixel aus dem <div> unterbringen.