• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Video strechting

B

burn4ever

Mitglied
Hi,
ich habe ein Video welches mittels css bei ändern der Größe des Browserfensters immer mitskaliert.
PHP: 
video {

    width: 100%;
    height: 100%;
    position: absolute;
    outline: none;
    
}

Wie schaffe ich es das das Video bei gleichbleibenden Seitenverhältniss das Browserfenster komplet füllt, sprich soweit aufgezogen wird das meine momentanen Leerflächen, welche sich oben und untenbefinden, verschwinden?

Muss da JavaScript ran?
 
Nein, das geht per CSS.

Code: 
* { padding: 0;margin: 0; }

Und ggfs. auch noch die Höhe aller Elemente bis zum video-Element auf 100% setzen - per CSS.
 
hmmm,
bin fast am Ziel ;-)

html:
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css"
<meta charset="UTF-8">
<title>Videotest</title>
</head>
<body>
    <video autoplay="autoplay" loop="loop"> 
        <source src="drums.mp4"    type="video/mp4" />
        <source src="drums.webm"   type="video/webm" />
    </video>
</body>
</html>

CSS:
PHP: 
* {
  margin: 0;
  padding: 0;
}


body{
    
    background-color: #ffffff;
}

video {
    padding: 0;
    margin: 0;
/*     width: 100%; */
    height: 100%;
    position: absolute;
    outline: none;
    overflow: hidden;
}

Er skaliert mir zwar so das Video immer auf 100% in der Höhe, mit dem gleichen Seitenverhältniss aber:
1.) Wenn ich mit dem Browserfenster unter der Videobreite bin (also kleiner als aktuell width) wird mir der Skrollbalken angezeigt, obwohl ich "overflow:hidden;" gesetzt habe.
2.) Wenn ich mit dem Browser über der aktuellen width bin skaliert er mir das Video natürlich nicht weiter da ich den width Parameter auskommentiert habe. Sobald ich width im css auch auf 100% setzte greift nur width und ich habe in der Höhe wieder kein vollflächiges Video.

Im Prinzip möchte ich mein Video im Browser oben, links ausrichten und dann egal wie groß der Browser ist das Video fullscreen haben aber das Seitenverhältniss soll erhalten bleiben.
Was theortisch bedeutet das ein Parameter eigentlich immer über 100% skaliert werden müsste....oder????
 
Ergänze mal noch

Code: 
html, body { height: 100%; }

und für die Breite evtl.

Code: 
min-width: 120px;

(jeweils an die Mindestbreite angepasst).
Allerdings ist es natürlich nicht wirklich sinnvoll die Mindestbreite für ein Video zu unterschreiten. Das dann ein Scrollbalken kommt finde ich logisch. Sollte aber nur bei sehr kleinen Viewports passieren, die deine Seite vermutlich nicht aufrufen werden?!

Moderation: Verschoben von HTML zu CSS.
 
Hmm,
nee das wars jetzt irgendwie leider auch nicht.

Also im Prinzip möchte ich das so haben wie hier:
blacknegative

Da kann ich den Browser aufziehen wie ich will das Video ist immer fullscreen.
Nur wie das umgesetzte ist konnt ich noch nicht raus finden.

Wenn ich mir das mit Firebug angucke wird das Video in den width und height Werten verändert und ggf. aber noch marign-top versetzt.
 
Zuletzt bearbeitet:
Ah jetzt verstehe ich. Ja, JavaScript ist dort offenbar ein Mittel. Der größte Unterschied zu deinem Vorhaben ist jedoch, dass auf dieser Seite offenbar kein Video eingebunden ist. Das ist pures CSS und JavaScript.
 
Okay.
JavaScript.
Warscheinlich werden hier width und height Werte anhand der Browsergröße gesetzt.
In Flash wüsste ich sofort wie das geht ;-)

Es muss wohl ein Eventlistener geben welche die stage überweacht bzw. die funktion bei einem resize ausgeführt wird.
Da fehlen mir leider die JavaScript kenntnisse die ich mir noch aneignen muss bzw. will ;-)


Aber wieso kein Film??
blacknegative
Direkt nach dem preloader läuft doch ein Video im Background (bzw. z-index).
Siehe:<div id="whoweare-loop-video"></div>

In der min.js gibt es auch ein paar Verweise auf die obige Klasse doch leider finde ich den Code, welcher für das skallieren zustänig ist nicht...

Vielleicht findet den ja jemand anders ;-)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben