Texte centré verticalement sur vidéo

Bonjour,

Je cherche à insérer une vidéo (taille : 1280x400) dans un bandeau de mon site, à insérer du texte dessus (centré horizontalement et verticalement), et à rendre le tout responsive !

Le code ci-dessous fonctionne sur grand écran, mais dès que je diminue ma fenêtre la vidéo se redimensionne en largeur et hauteur, ce qui me crée une grande marge dessous et un texte plus du tout centré par rapport à la vidéo. J'ai essayé en enlevant le "height: auto;" de la video mais cela ne change rien

Avez-vous une idée des modifications à faire ?

J'ai pour l'instant ce code html :

<div id="Container1">
<div id="Video1">
<video autoplay="autoplay" id="video" loop="loop" preload="preload">
<source src="/images/mavideo.mp4" type="video/mp4"> </source></video>
<div id="Message1"><h1>Your text to display</h1>
</div>
</div>
</div>

et ce code css :

#Container1 {width: 100%; height: 360px; overflow:hidden; position: relative;}
#Video1,#Message1 {width: 100%; height:360px; position: absolute; top: 0; left: 0;}
#Message1 {text-shadow: 2px 2px 2px #000000; color:white; display: flex; }
#Message1 h1{font-size: 3em;color:#ffffff;text-align:center; margin: auto;}
video {
  max-width: 100%;
  height: auto !important;
  display: block;
}

Merci d'avance

Merci beaucoup pour l'aide, je pars sur cette piste