Dynamischer Video loop

[escapet]

ein herzliches Grüezi

Ich habe auf meiner Seite Hintergrungvideos eingebunden, welche per Zufall aus einem Verzeichnis geladen werden.
Die funktioniert auch einwandfrei. Auch werden sie über die ganze Seite angezeigt.

Das Problem das ich habe ist, dass die Skalierung nicht dynamisch ist (bei anderen Auflösungen) das heisst das Video wird nicht mehr ganz dargestellt. Sprich schon über die ganze Seite, aber eben nicht mehr alles zu sehen.

Hier mal das PHP:

$Verzeichnis = "img/video";
 
if($Verzeichniszeiger = opendir($Verzeichnis))
{
        while($Datei = readdir($Verzeichniszeiger))
        {
                if(!is_dir($Datei))
                {
                        $Dateien[] = $Datei;
                }
        }
 
        closedir($Verzeichniszeiger);
}
 
echo"<video autoplay loop preload='auto' id='bgvid' src=\"",
        $Verzeichnis,
        "/",
        $Dateien[rand(0, count($Dateien)-1)],
        "\"></video>";

und noch das css:

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
video { display: block;
#bgvid { display: none; }

Kann mir jemand hierbei helfen?
Schon mal Danke im Voraus....

escapet

 

[SpiceLab]

In deinem präsentierten CSS fehlen zwei }-Klammern zum Beenden der Regelblöcke. Oder handelt es sich nur um einen Kopierfehler?

Edit: Scheinbar nicht, wie ein Schnelltest ergeben hat

 

[escapet]

habe ich gar nicht bemerkt, aber es funktioniert auch wenn man den untern Teil weglässt (in dem Fall braucht es das gar nicht):

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
}

Weisst du aber wie ich das Video dynamisch anpassen kann?

 

[SpiceLab]

Das hier braucht es sehr wohl noch, damit das Video skaliert wird, anstatt aus dem Viewport zu verschwinden:

video { display: block }

Ebenfalls fix getestet

 

[SpiceLab]

Andernfalls den ersten Regelblock wie folgt modifizieren:

video {position:fixed;right:0;bottom:0;width:100%;height:100%;z-index:-100}

Hinweis: Das Video füllt den Viewport so weit aus, wie es das Seitenverhältnis des Videos zulässt.

 

[escapet]

hi, SpiceLab
könntest du bitte den ganzen CSS einfügen?

 

[SpiceLab]

könntest du bitte den ganzen CSS einfügen?

Hab ich doch

 

[escapet]

ups... Kopierfehler meiner Seist, sorry

Aber so wird es nicht ganzseitig angezeigt (links und rechts bleibt ein Leeraum)

 

[SpiceLab]

Siehe Post #5, da mein Schnelltest nur bei gleichzeitiger horizontaler u. vertikaler Skalierung funktioniert hat, aber nicht bei einseitiger Ausrichtung, wie sich leider später herausstellte.

 

[escapet]

ok, heisst das nun, das mein "Wunsch" so nicht realisierbar ist :-(