Ich bin lediglich sporadisch am Seitencoden und bitte um etwas Geduld bei der vielleicht etwas "unkundigen" Frage:
Ich möchte ein Backgroundvideo vor allem im Header der Landingpage einer Webseite unterbringen und habe das eigentlich weitgehend anhand von "copy & Paste" Zitaten von Video Tags und Style attributen hinbekommen.
Das einzige Problem für dessen Lösung ich dann doch etwas mehr Fachwissen bräuchte wäre die responsive Positionierung des Videos. Derzeit schiebt sich die Breite immer etwas zusammen wenn ich das Fenster verenge ich würde es gerne immer a) gefüllt und b) immer im richtigen Seitenverhaltnis haben. Laut Windows-Explorer Dateieigenschaften soll das Video 1920px/breit) und 1080px hoch sein.
Was muss ich den Style noch hinzufügen, damit das nicht mehr zusammengedrückt wird auf kleineren Bildschrimen/Fenstern?
Hier sind die Style-Attribute und der - gleich nach "<body>" folgende - videotag:
Für jeden hilfreichen Tipp bin ich natürlich super dankbar.
Die gerade erst im Aufbau befindliche Seite ist hier zu sehen: https://rachmaninov.resampled.de
<style>
body {margin:0px; background-color: #000;}
#video_background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);min-width: 100%;
object-fit: fill;
min-height: 100%;
<!--object-fit: fill;-->
<!--width: auto;
height: auto;
z-index: -1000;-->
overflow: hidden;</style>
</head>
<body>
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="video/rach-bg1.mp4" type="video/mp4">Video not supported </video>
)