Verwendung: Video im Slider

Michi's Avatar

Michi

23 Apr, 2024 09:52 AM

Produkt: Oneo Contao
Contao-Version: 4.9.29
Browser und Browserversionen: Firefox, Chrome

Hallo zusammen
Ein Kunde will ein Video im Slider ablaufen lassen. Soweit habe ich es mal hinbekommen mit der Erweiterung Video, doch dann wird es in der vollen Grösse ausgebelendet, auch wenn ich sage das es kleiner sein soll.
Dann habe ich es mit dem RockSolidSlider Modul noch versucht aber da klappt es auch nicht wirklich, dass Video wird gar nicht angezeigt und in einer weiteren Version die ich als Video versucht habe scheint es nur am Laden zu sein.
Auf der untenstehenden Seite habe ich im Header die oben erwähnten 3 Versionen nacheinander aufgeführt, vielleicht sehen Sie was, woran es liegen kann ? Oder was ich noch anpassen muss ?
Gibt es allenfalls einen Vonverter wo man das Video Format 480x480 anpassen kann auf 16:9 oder so ? Dann wäre es auch eher breit und nicht quadratisch. Oder kann man das mit YouTube oder Vimeo besser hinbekommen und dann verlinken ?
Vielen Dank und Grüsse
Michi

  1. Support Staff 1 Posted by RockSolid Theme... on 23 Apr, 2024 01:04 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Sie können dem Video-Inhaltselement eine CSS-Klasse wie z. B. video-narrow zuweisen und dann mit folgendem CSS-Code die Größe steuern:

    .video-narrow {
      max-width: 480px;
      margin: 0 auto;
    }
    
  2. 2 Posted by Michael Löffler on 23 Apr, 2024 09:04 PM

    Michael Löffler's Avatar

    Grüezi und vielen Dank für Ihr Feedback.
    Ich habe nun vom Kunden ein YouTube Link erhalten und habe das Element
    "YouTube" gewählt, den Link und die ID verknüpft, auf 16:9 eingestellt,
    alles passt.
    Aber ich habe auch "Autoplay" aktiviert, dass das Video direkt starten soll,
    was es aber leider nicht macht. Kann man dies oder muss ich dies noch
    irgendwo aktivieren ?

    Vielen Dank und Grüsse
    Michi

  3. Support Staff 3 Posted by RockSolid Theme... on 24 Apr, 2024 03:03 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    In den meisten Browsern ist das automatische abspielen von Videos nicht erlaubt wenn es nicht durch eine User-Interaktion, wie z. B. einem Klick, ausgelöst wurde. Ausgenommen davon sind in der Regel stummgeschaltene Videos.

  4. 4 Posted by Michael Löffler on 24 Apr, 2024 10:33 PM

    Michael Löffler's Avatar

    Vielen Dank für die Antwort.

    Contao bietet diese Funktion mit dem automatischem Start an meinte ich....
    Daher habe ich das Autoplay aktiviert. Kann man die Stummschaltung bei
    YouTube Videos auch noch speziell aktivieren ?

    Wenn ich es als «Video/Audio» Modul verwende, dann startet es automatisch.
    Dort kann man die Stummschaltung auch aktivieren. Doch leider kann man es
    dort nicht auf das Format 16:9 schalten, was wieder mehr dem RockSolid
    Slider entsprechen würde von der Ausgabe her.

    Kann man sonst das «Video/Audio» Modul auch auf 16:9 umstellen ? Oder ein
    css das dies erlaubt ?

    Vielen Dank und Grüsse

    Michi

  5. Support Staff 5 Posted by RockSolid Theme... on 25 Apr, 2024 10:06 AM

    RockSolid Themes's Avatar

    Kann man die Stummschaltung bei YouTube Videos auch noch speziell aktivieren ?

    YouTube scheint eine solche Option nicht anzubieten für die iframe-Video-Integration.

    Kann man sonst das «Video/Audio» Modul auch auf 16:9 umstellen ? Oder ein css das dies erlaubt ?

    Das lässt sich mit folgendem CSS-Code realisieren:

    .video-narrow video{
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • Brainactive_-_Intro-1.mp4 4.07 MB

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