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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Flodur 58

Neues Mitglied
15 Oktober 2021
1
0
1
63
in 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;
}
}


Es funktioniert auch nur wenn ich den .de-video-container ausblende.


Das wäre der Code in der Css.:



video, object {

display: inline-block;

vertical-align: baseline;

min-width: 100%;

min-height: 100%;



}

.de-video-container {

top: 0%;

left: 0%;

height: 500px;

width: 100%;

overflow: hidden;

}

.de-video-content {

width: 100%;

position: absolute;

z-index: 10;

}

.de-video-overlay {

position: absolute;

width: 100%;

min-height: 100%;

background:url(images/background/rsl-bg.jpg)

}

.de-video-overlay.dotted {

background: url(video/rsl-bg.jpg);

}

.video-fixed {

width: 100%;

position: fixed;

top: 0;

}


Ich bedanke mich im Vorfeld
Viele Grüße
Flodur
 

basti1012

Senior HTML'ler
26 November 2017
1.687
177
63
Minden
basti1012.de
Ich sehe gerade, dass du hier schon Antwort bekommen hast.
Deswegen wird hier auch keiner antworten.

Denke daran, dass Crossposting verboten ist und dadurch werden in der Regel deine Themen geschlossen und dann kann dir erst recht keine mehr helfen.
 
Werbung: