Contao Video Player Responsive umsetzen (ce_player.hml5)

Ganz wichtig ist vor allem das als erster Schritt nicht vergessen wird, im Seitenlayout das zu aktivieren. Also dort das Häkchen setzen! Ansonsten wird es unweigerlich Probleme mit dem Playbutton im Video geben, wenn man den folgenden Anweisungen folgt.

Gerne wird der Lösungsansatz verfolgt das Template anzupassen. Also frisch ans Werk:

Gehe auf Templates und klicke auf Neues Template, wähle dann das ce_player.html5. Ob man es umbenennt und dann das Template gezielt im Element auswählt, bleibt jedem selbst überlassen. Behält man den Namen bei, wird das Template einfach global auf der ganzen Webseite verwendet und ersetzt solange es vorhanden ist das Standardtemplate. Dies genügt in der Regel auch.

Dann das neu erzeugte Player-Template bearbeiten und im Quelltexteditor anpassen. Dazu folgende Zeile ändern:

... <video<?= $this->size ?> ...

ergänzen mit folgendem Code:

... <video style="width: 100%; height: 100%;" <?= $this->size ?> ...

Nun noch Speichern!

Das war es schon. In der Regel verhält sich der Player nun Responsive und passt sich dynamisch dem umschließenden Element an. Sollte der Playbutton in der Mitte verschwinden lest nochmal den Anfang oben durch, denn gerne vergisst man das Häkchen im Seitenlayout zu setzen.

Zurück