Video schwarzer Hintergrund ändern z.B. in Rot

Hallo nobbihn!

An deiner Stelle würde ich zuerst den schwarzen Rand (die Ursache) eliminieren, und später den roten Rand via CSS um das Video legen.

Ein schwarzer Rand um ein Video kann unterschiedliche Ursachen haben.

Ursache 1:
Eine Ursache kann sein, dass das Video vormals in einem anderen Seitenverhältnis vorlag, und bei einer Konvertierung das Zielformat nicht das exakte Seitenverhältnis wie das Quellformat hatte. Dann kann es passieren, das das Bearbeitungsprogramm die fehlenden Pixel mit schwarz auffüllt, damit das Zielvideo nicht verzerrt wird. Dieses Problem kann man mit dem Windowsprogramm Xmedia Recode lösen, indem man es wieder exakt ausschneidet. - Falls du hier eine Anleitung benötigst, kann ich dir eine Step-by-Step Anleitung schreiben.

Ursache 2:
Der andere (wahrscheinlichere) Grund ist, dass der Video-Shortcode in Wordpress (vereinfacht ausgedrückt) quasi nur einen "Rahmen" oder Fenster darstellt, innerhalb dessen das Video abgespielt wird.
Hat dieser Rahmen nicht das selbe Seitenverhältnis wie das Video, dann wird das Video skaliert, damit es in den Rahmen hineinpasst. Als Ergebnis sieht man dann auch wieder einen schwarzen Rand.

Ich würde an deiner Stelle wie folgt vorgehen:

1). Überprüfe erst einmal, ob sich der schwarze Rand innerhalb des Videos befindet. Dies kannst du z.B. tun, indem du das Video in "VLC media player" lädtst. In VLC kannst du in den Systemeinstellungen die Hintergrundfarbe von schwarz in eine andere Farbe ändern. Dann wird es sichtbar, ob der schwarze Rand sich innerhalb des Videos befindet. - ein Umfärben in eine andere Farbe wird (wohl) nicht möglich sein.
Liegt der schwarze Rand innerhalb des Videos würde ich das Video mit xMedia Recode sauber ausschneiden und die neuen Videomaße sauber in Wordpresss anpassen.

2). Unter Windows sollten dir die Maße (Länge und Breite in Pixeln) des Videos im Dateimanager angezeigt werden, wenn du auf die Datei klickst. Dieses Seitenverhältnis muss natürlich auch im Videocode in Wordpress angegeben werden. Hier mal ein Beispielcode für ein Video mit den Maßen 640x360 Pixeln (was einem Seitenverhältnis von 16:9 entspricht).

[video src="http://www.meinehomepage.de/Verzeichnis/Dateiname.mp4" width="640" height="360" poster="http://www.meinehomepage.de/Verzeichnis/Dateiname.png" preload="true"]

Den roten Rahmen um das Video würde ich dann versuchen über CSS zu lösen - da kenne ich mich aber nicht aus, das müsste jemand anders erklären.

Anmerkung:
Komplett kann man einen "schwarzen Rand" nicht vermeiden. So musste ich feststellen, dass bei meinen Videos auf dem normalen Desktop-PC kein schwarzer Rand zu sehen ist, wenn ich mir aber die Videos auf meinem Subnotebook mit 10" Bildschirm anschaue, bei manchen Videos doch ein sehr dünner schwarzer Rand zu sehen ist. - Das liegt daran, dass die Displaypixel eines Bildschirms nicht exakt die selben Abmessungen haben als die "normalen" Pixelangaben eines Videos.

Und zu guter letzt noch ein Link zu einem Beispielvideo (ohne Rand).

Beispielvideo

Gruß Frank