Video Slider (full width)

Thema wurde von Tappzeit, 28. November 2024 erstellt.

  1. Tappzeit

    Tappzeit Erfahrener Benutzer

    Hallo,
    hat jemand schon mal ein Video Slider eingebunden? Gibt es dafür ein Modul oder eine anderweitige Anleitung?
    Vielen Dank
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Das würde mich auch interessieren!:)
     
  3. Walter Lenk

    Walter Lenk Erfahrener Benutzer

    Hallo zusammen,

    könnt Ihr das etwas genauer erklären? Sollen die Videos dann pro Slide kurz anlaufen und dann ablaufen bis das nächste Video zu sehen ist? Kann das Video in irgendeiner Weise dann auch in voller Länge angesehen werden? Die Videos sollen, nehme ich an, direkt als .mp4 am eigenen Server liegen und nicht bei Youtube?

    Grüße
    Walter
     
  4. w_roensch

    w_roensch Aktives Mitglied

    Hallo,

    meinst Du sowas wie bei uns -> chikara-shop.de

    Schaus Dir mal an, das war relativ einfach zu realisieren

    Gruß Wolfgang
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Hallo @Walter Lenk , ja, das Video soll auf dem eigenen Server liegen und im Grunde, das ist gerade wohl ein wichtiger Gedanke, gar nicht zwingend als Teaser/Slider eingebunden werden, sondern soll nur vom Format her dem Slider gleichen.
    Wir haben nicht vor mehrere Videos einzubinden.
    Danke!
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Hallo @w_roensch, so ähnlich ja, die Größe wäre wünschenswert an ie Slider-Größe angepasst.
    Grüße
    Roland
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Ich würde keinen Slider für Videos nutzen.

    1️⃣ Zu hoher Datenverbrauch: Videos fressen zu viele MBs für die Nutzer.
    2️⃣ Bessere Alternative: Kurze Videos sind super, aber statt YouTube nutze ich einen eigenen Player direkt im Code.

    Hier ein Beispiel, wie ich es intern umgesetzt habe:
    Code:
    <div class="widget-content">
        <div class="video-background col-xs-height-75 col-md-height-100" id="video-container">
            <video autoplay loop muted playsinline>
                <source src="images/Video-Weihnachtsmarkt.mp4" type="video/mp4" />
            </video>
            <div class="content vertical-align-center horizontal-align-center text-center">
                <p>&nbsp;</p>
            </div>
        </div>
    </div>
    
    ✅ Eigener Player statt YouTube
    ✅ Autoplay, Loop & Mute für ein nahtloses Erlebnis
    ✅ Optimiert für Desktop & Mobile
     
  8. Nico (Kostbar)

    Nico (Kostbar) Erfahrener Benutzer

    Hallo,
    ich habe mal so etwas gebastelt auf https://absodry-shop.de/

    Theme bearbeiten -> HTML-Content hinzufügen:

    HTML:
    <video autoplay playsinline loop muted poster="/dein-standbild.jpg" title=""><source src="/dein-video.mp4" type="video/mp4" /> Der Browser kann das Video nicht anzeigen.</video>
    In eigene Stylesheets folgendes ergänzt:

    Code:
    video {
       display: block;
      object-fit: cover;
       width: 100%;
        height: 500px;
    }
    
    @media (min-width: 1260px) {
       video {
          height: 600px;
       }
    }
    Viele Grüße
    Nico
     
  9. Tappzeit

    Tappzeit Erfahrener Benutzer

    Genau sowas habe ich gesucht :)
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Sieht Klasse aus! Good Work!
     
  11. w_roensch

    w_roensch Aktives Mitglied

    Hallo,

    die Größe der Videodatei läßt sich mit diversen Programmen verkleinern. Die Bilder werden dadurch etwas unschärfer, vorallem bei viel Bewegung , aber wir haben es trotz abraten für vertretbar gehalten. Wir haben das Video nicht für die Handyversion übernommen, weil sich jeder ohne Flat über den Datenverbrauch nicht nur wundern würde. Gambio sollte eigentlich mitkriegen, dass diese Möglichkeiten ein Video als Hintergrund zu verwenden überall üblich sind. Lassen wir uns von 5.0 überraschen, falls die irgendwann doch noch kommt.
    Gruß Wolfgang
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Ja mal sehen. Aber ich habe bereits im Kundenportal, bei Shop Bearbeiten etwas gefunden heute :-D Bild_2025-02-26_202820163.png