Kennen Sie das? Sie haben mit viel Mühe ein beeindruckendes Video im Hochformat erstellt, perfekt auf Ihre Website geladen und es mit Elementor nahtlos in Ihre Seite integriert. Alles sieht fantastisch aus – bis ein Besucher versucht, das Video im Vollbildmodus anzusehen. Plötzlich ist der Bildschirm nicht mit dem Video gefüllt, es ist verzerrt, abgeschnitten oder von unschönen schwarzen Balken umgeben, die nicht dorthin gehören. Ein echter WordPress/Elementor-Alarm! Dieses Problem, insbesondere bei Videos im Hochformat, ist frustrierend und beeinträchtigt die Benutzererfahrung erheblich. Doch keine Sorge, Sie sind nicht allein mit diesem Problem, und noch wichtiger: Es gibt eine Lösung!
In diesem umfassenden Leitfaden tauchen wir tief in die Ursachen dieses weit verbreiteten Problems ein und zeigen Ihnen Schritt für Schritt, wie Sie den Fehler bei Videos im Hochformat im Vollbildmodus dauerhaft beheben können. Machen Sie sich bereit, die volle Kontrolle über Ihre Videoanzeige zurückzugewinnen!
Der „Alarm”-Fall: Was genau passiert da?
Bevor wir uns der Lösung widmen, ist es wichtig zu verstehen, warum dieser Fehler überhaupt auftritt. Das Problem liegt meist in der Art und Weise, wie Browser und Videoplayer versuchen, ein Video, das für ein vertikales (Hochformat) oder quadratisches Seitenverhältnis optimiert ist, in einen horizontalen (Querformat) Vollbildmodus-Container zu quetschen. Standardmäßig gehen viele Browser und Videoplayer davon aus, dass Videos im Querformat vorliegen und versuchen, diese entsprechend zu skalieren.
Wenn ein Video im Hochformat in den Vollbildmodus wechselt, versucht der Player oft, die Breite des Bildschirms auszufüllen, während die Höhe proportional angepasst wird. Da der Bildschirm im Vollbildmodus jedoch meist ein Querformat hat, passt das Hochformat-Video nicht perfekt. Die Folge sind:
- Schwarze Balken: Oben und unten oder an den Seiten, je nachdem, wie das Video skaliert wird, um das Seitenverhältnis zu erhalten.
- Verzerrung: Das Video wird gestreckt oder gestaucht, um den Raum zu füllen, was zu einem unnatürlichen und unprofessionellen Aussehen führt.
- Abschneiden (Cropping): Teile des Videos, oft an den Rändern, werden abgeschnitten, um in den verfügbaren Raum zu passen, wodurch wichtige visuelle Informationen verloren gehen.
- Keine volle Bildschirmfüllung: Obwohl es im Vollbildmodus ist, füllt das Video nicht den gesamten Bildschirm aus, sondern bleibt klein oder ist falsch positioniert.
Diese Probleme werden durch die Interaktion von WordPress, dem Elementor-Editor und den nativen Browser-Videoplayern oder externen Einbettungen (wie YouTube/Vimeo) verstärkt. Jede Komponente hat ihre eigenen Standardeinstellungen für die Videodarstellung, und diese können bei Videos im Hochformat kollidieren.
Erste Hilfe und grundlegende Überprüfungen
Bevor wir uns an den Code wagen, stellen Sie sicher, dass die Grundlagen stimmen. Manchmal sind es Kleinigkeiten, die große Wirkung haben:
- Cache leeren: Leeren Sie alle Caches – den Browser-Cache, WordPress-Caching-Plugins (wie WP Super Cache, WP Rocket) und CDN-Caches (falls verwendet). Veraltete Cachedateien können Probleme verursachen.
- Elementor und WordPress aktualisieren: Stellen Sie sicher, dass sowohl WordPress als auch Elementor (und alle Add-ons) auf der neuesten Version sind. Updates beheben oft bekannte Fehler.
- Videoformat und -kompression: Verwenden Sie gängige Formate wie MP4. Achten Sie auf eine gute Kompression, um die Ladezeiten zu minimieren, aber stellen Sie sicher, dass die Qualität für den Vollbildmodus ausreicht. Überprüfen Sie auch das tatsächliche Seitenverhältnis Ihres Videos.
- Browser testen: Tritt das Problem in allen Browsern (Chrome, Firefox, Safari, Edge) auf oder nur in einem bestimmten? Dies kann auf ein browser-spezifisches Problem hinweisen.
Die Hauptlösung: CSS-Magie für den Vollbildmodus
Die effektivste und häufigste Lösung für den Fehler bei Videos im Hochformat im Vollbildmodus ist das Hinzufügen von speziellem CSS (Cascading Style Sheets). Dieses CSS weist den Browser an, wie das Video im Vollbildmodus zu skalieren ist, um die besten Ergebnisse zu erzielen.
Verständnis von `object-fit` und `object-position`
Die Schlüssel zu unserer Lösung sind die CSS-Eigenschaften object-fit und object-position. Sie sind ursprünglich für <img>-Tags gedacht, funktionieren aber auch hervorragend für <video>-Tags:
object-fit: Bestimmt, wie der Inhalt eines ersetzten Elements (wie eines Videos) die Höhe und Breite seines Containers ausfüllen soll.contain: Skaliert das Video so, dass es vollständig sichtbar ist, während sein Seitenverhältnis beibehalten wird. Es kann leere Bereiche (schwarze Balken) am Rand des Containers hinterlassen. Dies ist oft die beste Wahl für Hochformat-Videos im Vollbildmodus, da es Verzerrungen verhindert und das gesamte Video anzeigt.cover: Skaliert das Video so, dass es den gesamten Container ausfüllt und dabei sein Seitenverhältnis beibehält. Teile des Videos können dabei abgeschnitten werden, wenn das Seitenverhältnis des Videos nicht mit dem des Containers übereinstimmt.fill: Das Video wird gestreckt oder gestaucht, um den Container vollständig zu füllen, wobei das Seitenverhältnis nicht beibehalten wird. Dies führt zu Verzerrungen und ist selten gewünscht.none: Das Video wird nicht skaliert.scale-down: Das Video wird so skaliert, als obnoneodercontainverwendet würde, je nachdem, welche Größe kleiner ist.
object-position: Bestimmt die Position des Inhalts innerhalb des Containers, wennobject-fitnichtfillist. Sie können damit festlegen, ob das Video zentriert, oben, links usw. positioniert werden soll. Standardmäßig ist es50% 50%(zentriert).
Das CSS-Snippet für die Rettung
Hier ist der CSS-Code, den Sie anwenden müssen:
video:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* Oder 'cover', je nach Präferenz */
object-position: center !important;
}
video:-moz-full-screen {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* Oder 'cover' */
object-position: center !important;
}
video:-ms-fullscreen {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* Oder 'cover' */
object-position: center !important;
}
video:fullscreen {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* Oder 'cover' */
object-position: center !important;
}
/* Optional: Spezifischer für Elementor Video-Widgets, falls nötig */
.elementor-video-container video {
object-fit: contain !important; /* oder cover */
}
/* Für YouTube/Vimeo Embeds im Vollbild (kann komplexer sein, oft nicht direkt mit object-fit steuerbar) */
/* Dies betrifft eher das iframe selbst, nicht den Videoinhalt IM iframe */
/* Beispiel für iframe im Vollbild (variiert je nach Browser/Player) */
iframe:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
}
iframe:-moz-full-screen {
width: 100% !important;
height: 100% !important;
}
iframe:-ms-fullscreen {
width: 100% !important;
height: 100% !important;
}
iframe:fullscreen {
width: 100% !important;
height: 100% !important;
}
Erläuterung des Codes:
- Die Präfixe
-webkit-,-moz-und-ms-sind für die Browserkompatibilität notwendig, da der:fullscreen-Pseudo-Klasse noch nicht vollständig standardisiert ist. width: 100% !important;undheight: 100% !important;stellen sicher, dass das Video den gesamten verfügbaren Raum im Vollbildmodus ausfüllt. Das!importantist entscheidend, um vorhandene Stile zu überschreiben.object-fit: contain !important;ist der eigentliche Game-Changer. Es sorgt dafür, dass Ihr Video im Hochformat vollständig sichtbar ist, ohne Verzerrungen, selbst wenn dies bedeutet, dass an den Seiten schwarze Balken erscheinen. Wenn Sie stattdessen möchten, dass das Video den Bildschirm vollständig ausfüllt (auch wenn es am oberen/unteren Rand beschnitten wird), verwenden Sieobject-fit: cover !important;. Experimentieren Sie, was für Ihre spezifischen Videos und Ästhetik am besten passt.object-position: center !important;stellt sicher, dass das Video im Vollbildmodus zentriert bleibt.- Der zusätzliche Selektor
.elementor-video-container videozielt speziell auf das Video-Tag innerhalb des Elementor-Containers ab, falls das allgemeinevideo:fullscreennicht ausreicht. Sie müssen möglicherweise den genauen Selektor für Ihr Video-Element im Elementor-HTML (über die Browser-Entwicklertools) identifizieren. - Für YouTube/Vimeo Embeds: Diese sind komplexer, da der Videoinhalt in einem