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

Michi's Avatar

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

    RockSolid Themes's Avatar

    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.

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

    Michael Löffler's Avatar

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

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

    RockSolid Themes's Avatar

    Würde ONEO ein solches Popup Modul anbieten ?

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

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

    Michi's Avatar

    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.

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

    Michi's Avatar

    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.

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

    RockSolid Themes's Avatar

    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
        }
    }
    
  7. 7 Posted by MiguelNat on 14 Jul, 2024 11:15 PM

    MiguelNat's Avatar

    https://9humantypes.com/9-gifts-of-the-holy-spirit - The impact of charismatic gifts on faith development
    http://marketmebeli.com/ - Methods to instruct youth on Holy Spirit gifts 1464d7f

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac