Elementtyp Video/Audio - Responsive - Width 100%

[robrockchristoph]

Hallo,

bei dem Elementyp Video/Audio in Contao 3.x ist zwingend eine feste Größe anzugeben. Leider bekomme ich es nicht hin, das Video per CSS responsive zu machen. Das heißt die Breite soll immer 100% sein.
Kennt jemand die Lösung???

[robrockchristoph]

Ich habe die Lösung jetzt doch selbst gefunden:

CSS

object, embed, video, iframe {
max-width:100%;
}

Jetzt noch im Template ce_player im Video Tag die PHP-Ausgabe der festen Größe entfernen und folgendes Inline-CSS einfügen:

style="width:100%;height:100%;"

[rina.k]

Hallo robrockchristoph,

hast du dein Video mit dem Elementtyp Video/Audio zum Laufen gebracht? Ich würde mich freuen, wenn du mir verraten könntest, wie du das geschafft hast. Bei mir funktioniert es leider überhaupt nicht. Ich habe eine FLV-Datei eingebunden. Doch leider erscheinen weder Bild noch Ton und überhaupt auch kein Player...

Viele Grüße
rina.k

[robrockchristoph]

Hi, hast du bei deinem Seitentemplate das jQuery-Template "j_mediaelement" oder das Mootools-Template "moo_mediaelement" eingebunden?
Vielleicht liegt es auch an deinem Dateityp. Ich habe ein MP4 Video hochgeladen.

[rina.k]

Hallo robrockchristoph,
ich habe beides ausprobiert.
Dass es nur am Dateityp liegt, kann ich mir aber auch wieder nicht vorstellen, denn es erscheint ja noch nicht einmal die Überschrift, die ich im Elementtyp Video/Audio eingefügt hab.

[4lmnts]

Hi zusammen!

Ich verwende den html5media, das ist ein Video-/Audio-Player, und mit zwei Zeilen CSS sogar responsive!

.ce_html5 video {
    width:100%;
    height:auto;
}

Und geht natürlich auch im grid-system.

Lg Nick

[f1shman]

Hallo.

Gibt es da irgend eine Lösung? Benutzte Contao 3.1 und das Content Element Video. Leider sind die Videos auf dem Smartphone viel zu gross und passen sich nicht dem Bildschirm an. Die oben beschriebene Lösung hat nicht funktioniert.

thx!

[Luminanz]

Hallo zusammen

Habe leider auch das Problem, dass sich die Grösse des Videos bei mobilen Browsern nicht anpasst. Wenn ich die mobile Version der website auf dem Desktop anschaue, werden die Videos korrekt dargestellt bzw. verkleinert.
Woran könnte das liegen?

Gruss, Luminanz

[ab2211]

Danke! Hat geholfen. Da ich das Video kleiner brauchte und zentriert habe ich .ce_player noch max-width:640px und margin:0 auto; hinzugefügt.