Hallo allerseits,
auf meiner Seite erfolgreich-golfen.de möchte ich die Buttongröße der Videodateien auf der home
verkleinern, da sie bei sehr großen oder auch mobilen Geräten zu groß wirken.
Hat einer eine Idee?
Danke!
Druckbare Version
Hallo allerseits,
auf meiner Seite erfolgreich-golfen.de möchte ich die Buttongröße der Videodateien auf der home
verkleinern, da sie bei sehr großen oder auch mobilen Geräten zu groß wirken.
Hat einer eine Idee?
Danke!
Das sind HTML5 Video Elemente. Meines Wissens nach kannst du diese nicht gestalten.
Du meinst z.B den Play Button oder?
Ja, genau. Außerdem möchte ich ein Video davon automatisch starten, wenn die Seite aufgerufen wird. autostart=1
Aber wo muss ich das einsetzen?
Wie bindest du das Video ein ?
nicht über den Elementtyp Audio/Video, denn da gibts einen Hacken "Autoplay".
EDIT: Hier bischen was zum einlesen https://developer.mozilla.org/de/doc.../Element/video, suche mal nach "autoplay".
den Play Button kannst du mit CSS ändern
.mejs-overlay-button {
margin-top:2rem !important;
top:0 !important;
background-repeat: no-repeat;
background-size: 3vw auto, contain;
width:70px;
height:40px
}
.mejs-overlay:hover .mejs-overlay-button {
background-position: 0 -43px !important;
}
Video/Audio Element
Player-Einstellungen
Player-Größe Autoplay -> Haken setzen
Das Video automatisch beim Laden der Seite abspielen.
Schaust du: www.y2016.de
Hallo MAx, Danke für die Info.Und wo füge ich welchen Teil ein (oder alles)?
Dein Tip bringt nichts.Zitat:
Zitat von Max Kittel
Die unten genannte Seite enthält nur eine statische Tabelle mit 3 direkten Videoeinbindungen und einem Video (das zweite), bei dem man den rote Play-Icon beeinflussen könnte.
Allerdings ist in wirklich keinem der Fälle derzeit der normale Videoplayer eingebunden, was bedeutet es gibt an KEINER Stelle eine der .mejs-Klassen.
Das Video ist mit dem Inhaltselement »Video/Audio« eingesetzt
Kleine Korrektur da die vorige bei Größenänderungen den Button falsch anzeigte.
:hover sollte auch noch angepasst werden, springt nach dem Ändern der Größe des Browserfensters
Einfach in deine CSS schreiben
.mejs-overlay-button{
background-repeat: no-repeat;
background-size: 3vw auto, contain;
height: 5%;
margin-top: 2rem !important;
top: 0 !important;
}
@samuell
Hier die erzeugte HTML. Warum sehe ich hier die mejs Klassen und warum funktioniert es bei mir im Firefox und Chrome?
Was meinst du mit statischer Tabelle? Es ist auch nur ein Video, allerdings in drei Formaten (OGV, MP4 und WEBM)
Was habe ich da falsch gemacht?
div class="inside">
<div id="index" class="mod_article first block">
<div class="ce_player first last block">
<span class="mejs-offscreen">Video Player</span>
<div id="mep_0" class="mejs-container svg mejs-video" aria-label="Video Player" role="application" tabindex="0" style="width: 1216px; height: 684px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="background-image: url("files/Videos/In-The-Clouds/Snapshots/In-The-Clouds.jpg"); width: 100%; height: 100%; display: none;">
<div class="mejs-overlay mejs-layer" style="width: 100%; height: 100%; display: none;">
<div class="mejs-overlay mejs-layer" style="display: none; width: 100%; height: 100%;">
<div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 100%; height: 662px; display: block;">
<div class="mejs-overlay-button" style="margin-top: -1.5px;"></div>
</div>
</div>
<div class="mejs-controls" style="visibility: visible; display: block;">
<div class="mejs-clear"></div>
</div>
</div>
</div>
</div>
Ich rede von Peters Seite, nicht von Deiner.
Er hat das Problem und er hat Tabellen drin. Deine Lösung passt aber nicht zu SEINER Seite und SEINEM Problem.
@samuell
da habe ich wohl etwas einfach falsch verstanden, bitte entschuldige.
@Peter
wenn du im Seitentemplate unter jQuery das j_mediaelement anklickst dann hast du auch die mejs Klassen
Mal wieder ich mit einer Frage...
Im ce_player würd ich gerne die Abspielbuttons ändern. Also eine Lautsprecher und ein durchgestrichener Lautsprecher statt dem Start-Dreieck und den Pause-Doppelbalken. Geht das? Wenn ja, wie?
Herzlichen Dank im Voraus.