Hallihallo zum zweiten.
Habe eine Frage bezüglich einer Idee eines Hintergrundvideos in meiner Webseite.
Habe zuvor eine Frage gestellt bezüglich eines Hintergrundbildes welche von "lauras" beantwortet wurde.
Das mit dem Hintergrundvideo ist nun ähnlich.
Folgendes:
Ich möchte ein Hintergrundvideo in meine Webseite unter der HTML Downloads einbinden.
Es soll sich wie bei meiner Frage zuvor folgendermassen verhalten.
Es soll immer im korrekten Aspect Ratio dargestellt werden .. im gesamten Hintergrunds des Browserfensters.
Es soll unten rausgeschoben werden wenn ich das Browserfenster nach oben kleiner verschiebe aber oben nicht raus wandern.
Wenn ich das Browserfenster jedoch seitlich zusammenschiebe soll es nicht links oder rechts verschwinden sondern soll sich verkleinern und erst irgendwann links und recht gleichmässig verschwinden.
Also wie ich es bei einem Hintergrundbild haben wollte und geschafft habe dank folgendem Code der mir zugetragen wurde von "lauras" für die CSS-Datei:
{
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
Ich habe selber einen Code aus diversen Webseiten-tutorials herausgelesen und abgeguckt ... ähh ... ich meine ... ich wurde inspiriert.
Foldender Code für die CSS Datei kam zutage:
#video_background {
position: absolute;
top: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
Der Code für die dazugehörige HTML-Datei ist folgender :
<body>
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="movie.mp4" type="video/mp4">
Video not supported </video>
</body>
Jetzt ist es aber so das mein Video dann zu scrollen ist weil es größer ist als meine native Auflösung von 1920x1080 und es wandert links raus wenn ich es seitlich zusammenschiebe.
Ich möchte aber das es nicht zu scrollen ist und bei seitlichen zusammenschieben kleiner wird und irgendwann erst ... und dann gleichmässig ... links und rechts rausfährt aus dem Brwoserfenster.
So wie bei meinem Hintergrundbild oder beispielsweise bei der Webseite http://www.titanfall.com/de bei der es sich bei deren Video auch so verhält.
Wie mache ich das ... bzw. was muss ich am Code verändern damit ich das erreiche?
Oder muss der Code ganz anders aussehen und ist der den ich mir da zusammengeschustert habe wieder mal murks?
Ich hoffe auf eine helfende Antwort mit eventuell dem von mir geposteten ... dann korrigierten ... Code
Gruss Rongkongcoma
