Das müsste man selber testen können. Hast du einen Link zur Seite?
D.h. wenn du in der videocontrols.css etwas änderst, wirkt sich das nicht aus?
Eventuell einfach nur die Caches leeren oder auch mit !important arbeiten, was ich aber nicht glaube, dass das nötig ist.
Mittel F12 im Firefox lässt sich das zumindest schon mal ändern. Ich wüsste nicht, warum es nicht funktionieren sollte, wenn du es direkt in der css-Datei änderst.
Wenn es funktioniert, dann auch eine custom.css "ins Auge fassen"!
Die Datei videocontrols.css befindet sich nicht auf dem Server:
chrome://global/skin/media/videocontrols.css
Ach so, natürlich!
Und wenn du !important anhängst, bewirkt das etwas?
Anscheinend lässt sich die browsereigene Videosteuerung nicht umstylen, ähnlich wie das bei der browsereigenen Scrollbar der Fall ist. Die einzige Möglichkeit ist es wohl, die Videosteuerung mit eigenen Elementen zu ersetzen. Eine schnelle Suche ergibt z.B. folgende Links:
https://developer.mozilla.org/…deo_player_styling_basics
https://www.adobe.com/devnet/a…html5-multimedia-pt3.html
http://mrbool.com/how-to-style…-javascript-and-css/27683
Allerdings stellt sich dabei wie an anderen Stellen auch die Frage, ob es den Aufwand wert ist, die Browserimplementation umzubiegen, und es bringt auch einen großen Testaufwand mit sich, da man das dann auch in allen Browsern und an diversen Geräten testen sollte.
Das stimmt nur für das Design, nicht für das Layout. Mit ein paar Kniffen lässt sich sowohl das korrekte Bildverhältnis wie auch die responsive Anpassung an Smartphones erreichen. Das ist ja das gleiche wie bei Bildern.
Dazu die Attribute Width und Height aus dem Video Tag entfernen und im CSS die Breite auf 100% setzen, die Maximal-Breite auf die Breite des Videos.
video {
width: 100%;
max-width: 480px;
}