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

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