Falsche Darstellung des Sliders auf mobilen Endgeräten

Thema wurde von Anonymous, 3. Oktober 2016 erstellt.

  1. Anonymous
    Anonymous Mitglied
    Registriert seit:
    4. Juli 2016
    Beiträge:
    13
    Danke erhalten:
    0
    Danke vergeben:
    2
    Guten Abend,

    der Honeygrid-Slider oben wird auf allen mobilen Endgeräten falsch, d.h. über die ganze Seite angezeigt, so dass wichtige Buttons ausgeblendet bzw. kaum noch erkennbar sind.

    Hat eine(r) eine Idee, wie bzw. wo man die Einstellungen des Sliders bearbeiten kann, am liebsten per CSS.

    Vielen Dank im Voraus.
     
  2. Wilken (Gambio)
    Wilken (Gambio) Erfahrener Benutzer
    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.311
    Danke vergeben:
    2.208
    Das müssen Leute sehen um dir zu helfen, du solltest einen Link zur Baustelle posten.
     
  3. michaelkummert
    michaelkummert Mitglied
    Registriert seit:
    7. Januar 2014
    Beiträge:
    20
    Danke erhalten:
    0
    Danke vergeben:
    2
    Hab ich auch der Slider wird auf mobilen endgeräten nicht richtig dargestellt.

    www.edvkummert.de
     
  4. Wilken (Gambio)
    Wilken (Gambio) Erfahrener Benutzer
    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.311
    Danke vergeben:
    2.208
    Wo hast du denn einen Slider?
     
  5. michaelkummert
    michaelkummert Mitglied
    Registriert seit:
    7. Januar 2014
    Beiträge:
    20
    Danke erhalten:
    0
    Danke vergeben:
    2
    Meinte den Neue Artikel und unsere Empfehlungen.
     
  6. Wilken (Gambio)
    Wilken (Gambio) Erfahrener Benutzer
    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.311
    Danke vergeben:
    2.208
    Sieht bei mir ganz anständig aus. Was findest du denn da falsch ?
     
  7. Anonymous
    Anonymous Mitglied
    Registriert seit:
    4. Juli 2016
    Beiträge:
    13
    Danke erhalten:
    0
    Danke vergeben:
    2
    #7 Anonymous, 5. Oktober 2016
    Zuletzt bearbeitet: 5. Oktober 2016
    Inzwischen habe ich das Video in dieser Form im Content eingefügt:

    Code:
    <div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay="" class="embed-responsive-item" controls=""><source src="/shop/images/content/index/test.mp4" type="video/mp4" /></video>
    </div>
    Nun wird das Video nicht mehr über das ganze Display gezogen wie vorher, sondern in normaler Größe angezeigt und lässt sich auch abspielen, was vorher nicht der Fall war. Allerdings muss es jetzt händisch gestartet werden, es soll aber bei Aufruf der Startseite automatisch abgespielt werden.

    Was muss ich in dem angegebenen Code ändern, damit das Video automatisch startet?

    Alternativ wäre ich auch mit einem Startbild zufrieden anstatt diesem hier:

    [​IMG]

    Vielen Dank.
     
  8. #8 postel, 5. Oktober 2016
    Zuletzt von einem Moderator bearbeitet: 5. Oktober 2016
    habe ein Video laufen wenn der Shop offline ist mit folgendem Code:
    HTML:
    <div class="offline-video">
    <div class="embed-responsive embed-responsive-16by9">
    <video autoplay="" loop="" poster="images/video/no-video.jpg"><source src="images/video/gerd1.mp4" type="video/mp4" /> <source src="images/video/gerd1.opv" type="video/ogg" /></video>
    </div>
    </div>
    
    Code:
    /* da von Gambio auskommentiert, eigener *.css einfügen: */
    @import "..styles/bootstrap/bootstrap/responsive-embed"
    loop = ständige Wiederholung
    poster = ein Bild einfügen , wenn Browser das Video nicht abspielen

    Hilft dir das? nochmal geändert!
     
  9. Anonymous
    Anonymous Mitglied
    Registriert seit:
    4. Juli 2016
    Beiträge:
    13
    Danke erhalten:
    0
    Danke vergeben:
    2
    Das hat geholfen. Herzlichen Dank. :)
     
  10. Anonymous
    Anonymous Mitglied
    Registriert seit:
    4. Juli 2016
    Beiträge:
    13
    Danke erhalten:
    0
    Danke vergeben:
    2
    Gibt es eine Möglichkeit, dass das Video nur noch auf dem PC, aber nicht mehr auf mobilen Endgeräten angezeigt wird?
     
  11. in dem du hidden-xs einfügst, wird das Video auf kleinen Geräten (<768px) verborgen
    HTML:
    <div class="embed-responsive embed-responsive-16by9 hidden-xs">........
    
     
  12. Anonymous
    Anonymous Mitglied
    Registriert seit:
    4. Juli 2016
    Beiträge:
    13
    Danke erhalten:
    0
    Danke vergeben:
    2
    Vielen Dank. Das funktioniert.

    Wir sind natürlich auf der Suche nach der perfekten Lösung. ;)

    Deshalb noch folgende weiterführende Frage.

    Wenn man sich das Demo (Link nur für registrierte Nutzer sichtbar.) anschaut und das Browserfenster kleiner zieht, wird das Video über die ganze Länge gezogen, was natürlich unerwünscht ist. Das Video soll in den Proportionen erhalten bleiben.

    Wenn ich in der slider-USERMOD.html folgendes eingebe:
    Code:
    <div id="stage">
    <div align="center" class="embed-responsive embed-responsive-16by9 hidden-xs">
    <video autoplay="1" class="embed-responsive-item" controls="0" loop="0" poster="/shop/images/content/index/no-video.jpg"><source autoplay="1" controls="0" loop="0" src="/shop/images/content/index/Garten_stumm.mp4" type="video/mp4" /></video>
    </div>
    habe ich zwar das Video im richtigen Format, aber unterhalb des Videos eine riesen Fläche (s. Foto). Diese soll natürlich verschwinden.
     

    Anhänge:

    • demo.jpg
      demo.jpg
      Dateigröße:
      136,7 KB
      Aufrufe:
      10
  13. Wohin soll die denn verschwinden???? Die musst du schon mit irgendeinem Background versehen.
    Wenn du das als Slider im Shop einsetzt, müssten ja unter dem Video deine Angebote etc. zu sehen sein.
     
  14. Anonymous
    Anonymous Mitglied
    Registriert seit:
    4. Juli 2016
    Beiträge:
    13
    Danke erhalten:
    0
    Danke vergeben:
    2
    Nein die Fläche ist (auf mobilen Geräten) tatsächlich leer. Die eigentlichen Inhalte folgen erst daraunter. Sie soll mit dem unteren Ende des Videos abschließen, danach sollen die Inhalte folgen, so dass sie auf dem Startbildschirm unter dem Video zu sehen sind. Die Flache zieht sich über den ganzen Bildschirm, darunter folgen erste Inhalte. zu sehen auch im Demo (Link nur für registrierte Nutzer sichtbar.). Dort wird das Video über die ganze Höhe gezogen, was wir aber nicht wollen.
    Ich glaube das Div-Element heißt "stage".
     
  15. Gambio hat da bestimmt Höheangaben in #stage, außerdem fehlt bei deinem Code unten ein abschließendes </div>
    gib das mal so ein:
    HTML:
    <div class="embed-responsive embed-responsive-16by9 hidden-xs">
    <video autoplay="1" controls="0" loop="0" poster="/shop/images/content/index/no-video.jpg">
    <source src="/shop/images/content/index/Garten_stumm.mp4" type="video/mp4" /></video>
    </div>
    oder besser einen Link zum Shop, da kann ich das besser beantworten.
     
  16. Anonymous
    Anonymous Mitglied
    Registriert seit:
    4. Juli 2016
    Beiträge:
    13
    Danke erhalten:
    0
    Danke vergeben:
    2
    Vielen Dank.
    Ich habe das im Moment anders gelöst, so dass ein Link zum Shop leider nichts bringt. Auf der Demoseite (Link nur für registrierte Nutzer sichtbar.) sieht man das Problem ganz gut.

    Ich habe deinen Code eingfügt. Dann ensteht ein unerwünschter Abstand zur Navi oben, so wie es jetzt auch ist (todobook.de) . Das heißt, ich muss deinen Code zwingend in den Div-Container "stage" legen, um das Video ganz nach oben zu bekommen (s. Demoseite). Die Frage ist, wie kann ich die Höhe von "stage" auf die Höhe des Videos bringen und nicht auf die Höhe des ganzen Bildschirmes. Getestet habe ich height:auto und min-height:0px, dann wird gar nichts angezeigt.