Home → Contao →

Installation: Video in einem Popup Fenster anzeigen und am Ende wieder schliessen

• Edit

Michi

26 Jan, 2024 12:17 PM

Produkt: Tao Contao
Contao-Version: 4.13.29
Browser und Browserversionen: Firefox und Chrome

Hallo
Ein Kunde wollte ein Popup Fenster anzeigen, um folgendes Video darzustellen:
https://mundialito.ch/files/mundialito/video/Img%207690-1.mp4

Ich habe ein Popop Fenster erstellt, dann ein Slider Videomodul mittels Insert Tags eingebunden und dann das Popup in das Seitenlayout eingebunden.

Nun ist es aber so, dass das Popup
1) sehr schlecht dargestellt ist
2) das Video nicht von alleine beginnt

Wie kann man das besser einbauen ? So dass das Layout schön ist und das Video direkt startet ?
Wenn ich nur das Videomodul einbinde, dann kommt es nicht wirklich als Popup und es hat auch keinen Button, um es wieder ganz zu schliessen. Dazu ist das Video nur teilweise ersichtlich und nicht als ganzes Video.

Vielen Dank für eure wertvolle Unterstützung.

Grüsse
Michi

1. Support Staff 1 Posted by RockSolid Theme... on 26 Jan, 2024 02:31 PM

   

   Vielen Dank für Ihre Frage.

   Nun ist es aber so, dass das Popup
   1) sehr schlecht dargestellt ist

   Ein Popup-Modul für ein Video ist im Tao-Theme nicht vorgesehen, das nötige CSS für die Darstellung eines Popups muss somit selbst erstellt werden.

   2) das Video nicht von alleine beginnt

   Die meisten Browser erlauben es nicht Videos auf Websites automatisch zu starten. Es gibt eine Ausnahme, und zwar wenn das Video stumm geschalten ist (über das HTML-Attribut muted).

   Da anscheinend keine Slider-Funktion an dieser Stelle benötigt wird, sollte das Video besser direkt als Video-Element oder Eigener-HTML-Code umgesetzt werden.

   • Edit

2. 2 Posted by Michael Löffler on 26 Jan, 2024 02:37 PM

   

   Vielen Dank für die rasche Antwort.
   Würde ONEO ein solches Popup Modul anbieten ?

   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 26 Jan, 2024 03:40 PM

   

   Würde ONEO ein solches Popup Modul anbieten ?

   Nein, auch im Theme Oneo ist kein solches Modul enthalten.

   • Edit

4. 4 Posted by Michi on 01 Feb, 2024 08:09 AM

   

   Hallo, ich habe es als Popup hinbekommen mit einer Hinweisbox. Auf dem Laptop sieht es gut aus, doch auf der Handyversion ist das Popup nicht mittig. Können Sie mir allenfalls sagen, welches css ich entsprechend anpassen muss, dass es auf allen Endgeräten immer in der Mitte erscheint ?
   https://mundialito.ch/home-kopie.html

   Vielen Dank.

   • Edit

5. 5 Posted by Michi on 01 Feb, 2024 08:36 AM

   

   Sehe gerade auf der mobilen Version, dass das Logo in der Mitte und der Text nicht richtig angezeigt werden. Gibt es da allenfalls auch noch einen Hinweis, welches css ich da anpassen muss, dass das Logo vollständig ersichtlich ist und der Text sowie die Flaggen darunter nach und nach aufgelistet werden ? Es sieht so verschachtelt aus. Auf dem Laptop passt es bestens, auf der mobilen Handyversion sieht es aber recht "unschön" aus.

   • Edit

6. Support Staff 6 Posted by RockSolid Theme... on 01 Feb, 2024 11:01 AM

   

   Mit folgendem CSS-Code sollte sich die Darstellung korrigieren lassen:

   @media screen and (max-width: 599px) {
       .fixed-note.popup {
           position: static;
           height: auto;
           width: auto;
       }
       .titel {
           margin-top: -50px;
       }
       .feature-box {
           overflow: visible
       }
   }
   

   • Edit