Audio in Textelement via 'html audio' eingebunden jedoch erscheinen keine Buttons

Hallo!
Ich habe eine Audiodatei via 'html audio' in ein Textelement eingebunden. Es funktioniert so weit alles wie es soll, nur werden die Buttons 'Play' 'Pause' und 'Lautsprecher' nicht angezeigt bzw. blitzen diese beim Aufruf der Seite nur kurz auf und verschwinden dann wieder.
Im BE wird alles korrekt angezeigt nur im FE habe ich wie gesagt das beschrieben Problem.
Installiert ist Contao 4.4.21 und das opsenauce RockSolid Template/Theme. In den Seitenlayouts ist des 'js_mediaelement' aktiviert.
Danke schon vorweg und schöne Grüße
Bernhard.

Zitat:

---

Zitat von bteppan

(...) nur werden die Buttons 'Play' 'Pause' und 'Lautsprecher' nicht angezeigt bzw. blitzen diese beim Aufruf der Seite nur kurz auf und verschwinden dann wieder. (...)

---

Kann es evtl sein, dass hier ein CSS etwas ausblendet?
Hast Du einen Link zu der fraglichen Seite?

Hier der LINK --> http://kwhmr.w4yserver.at/der-spielstein.html
Die Seite ist noch im 'Prototyp-Status' daher ist noch nicht alles befüllt ;-)

Das "auto" stört:

PHP-Code:

---

.main-content button, .main-content input[type="submit"] {
    width: auto;
} 


---

Okay - Danke für die Info ... aber wie bekomm ich das weg? Selbst hinzugefügt hab ich es nicht.
Hier der Code den ich im Textelement eingefügt habe:
<h2>Radiomitschnitt Antenne-Interview</h2>
<p><audio controls="controls"><source src="files/opensauce/img/spielstein/2015-09-21_antenne.mp3"></audio></p>

Das ist leider nicht klar zu sehen. Aber einige Kommentare in der CSS-Datei mit der kryptischen Zeichenfolge deuten auf OpenSauce-CSS. Entweder suchst Du jetzt nach dem Selektor in den CSS-Dateien von OpenSauce und schmeißt das width:auto raus. Oder Du schickst Dein eigenes CSS hinterher und schreibst dort width:none - so ist glaube ich die Standardeinstellung.

Okay - dann versuche ich es einmal über die 'custom.css' und überschreib das Ding.
Danke Dir für Deine Hilfe und noch einen schönen Tag.
Bernhard

Das Problem konnte mit Hilfe des Supports von RockSolid und folgendem Eintrag in der 'custom.css' gelöst werden:
.mejs__button > button {
width: 20px;
background-image: url(../../../assets/mediaelement/images/mejs-controls.svg);
}
.mejs__play>button{background-position:0 0}
.mejs__pause>button{background-position:-20px 0}
.mejs__replay>button{background-position:-160px 0}
.mejs__fullscreen-button>button{background-position:-80px 0}
.mejs__unfullscreen>button{background-position:-100px 0}
.mejs__mute>button{background-position:-60px 0}
.mejs__unmute>button{background-position:-40px 0}

Danke für eure Hilfe und noch einen schönen Tag
Bernhard