Video für mobile Geräte ausblenden und mit Media Square gegen Standbild tauschen

  • Ein freundliches Hallo in die Runde, ich bin neu hier und hoffe das passt so wie es einstelle.

    Ich habe auf einer HTML5 Startseite ein Vollbildvideo im Einsatz. Ich würde nun gerne für alle mobilen Geräte das Video gegen ein Standbild tauschen. Mein Ansatz war es in der Media Square mit display none auszublenden. Ich habe aber gelesen dass diese Methode nicht optimal ist weil es das Video trotzdem lädt was für das Handy nicht so toll wäre.

    Kann mich dazu bitte jemand unterstützen?

    So klappt es das Video auszuschalten jedoch habe ich dann einen weißen Hintergrund. Wie ich jetzt hierzu den Hintergrund gegen ein Standbild tauschen kann macht mich ratlos ;(


    @media (max-width: 767px) {
    .de-video-container {
    display: none ! important;
    }
    }


    Das wäre der Code in der Css.:


  • Hey Flodur,

    du musst dort das Video durch dein Bild ersetzen. Das kannst du meines Wissens nicht über CSS machen. Dafür brauchst du JavaScript.


    Erfasse dort die Video-Elemente und lösche diese aus der Webseite (dem DOM - Document Object Model): Video-Elemente entfernen

    Nun nachdem du diese entfernt hast, fügst du an entsprechender Stelle noch die neuen Bilder ein: Element hinzufügen


    Hierbei ist es wichtig, dass du dem Container, in dem vorher das Video drin ist, eindeutig kennzeichnest, um es auch über JavaScript ansprechen zu können.


    Für die Bestimmung, ob es sich um ein Handy handelt, findest du hier Informationen: https://stackoverflow.com/ques…to-detect-a-mobile-device


    Schöne Grüße,
    Stef

  • Oder du erstellst die Elemente erst dann, wenn du sie brauchst.

    https://codepen.io/basti1012/pen/LYjGBzd?editors=1010

    Das resize ist hier nur zur Anschauung , das würde ich vielleicht später weglassen, oder so umbauen, dass die Elemente nur einmal erstellt werden, wenn sie in den Bereich kommen.

    Bei der ersten Version erstellt er bei jeden Resize Pixel das Element neu und bei den hier nicht

    https://codepen.io/basti1012/pen/NWvxBJx?editors=1010

  • Stimme zu, das wäre eine Alternative. Und zu dem Einwand vom Fragesteller selber:

    Zitat

    Mein Ansatz war es in der Media Square mit display none auszublenden. Ich habe aber gelesen dass diese Methode nicht optimal ist weil es das Video trotzdem lädt was für das Handy nicht so toll wäre.

    ist zu sagen, dass die Browser auf Mobilgeräten ein Autoplay nicht zulassen. Daher kann man davon ausgehen, dass auch auf Mobilgeräten das Laden des Videos unterbleibt.

  • Stimme zu, das wäre eine Alternative. Und zu dem Einwand vom Fragesteller selber:

    ist zu sagen, dass die Browser auf Mobilgeräten ein Autoplay nicht zulassen. Daher kann man davon ausgehen, dass auch auf Mobilgeräten das Laden des Videos unterbleibt.

    Das wäre gut, wenn man das mal testen könnte. Auf dem Handy geht die Fehlerkonsole ja nicht. Kennt da einer eine Möglichkeit wie man auf dem Handy richtig debuggen kann?

    Die Apps die ich mal getestet habe wahren Mist