Hallo zusammen,
leider habe ich folgendes Problem und dazu bisher nirgendswo eine Antwort gefunden.
Ich habe Buttons, welche sich auf einem Video befinden. Diese sollten sich nun proportional mit der Videogröße verändern und an der exakt gleichen Stelle bleiben. Momentan gestaltet es sich so, dass das Video sich responsiv verkleinert, die Buttons jedoch ihre Größe beibehalten.
Mein aktueller Code sieht wie folgt aus:
HTML
HTML-Code:
<video controls="controls" width="auto" height="auto">
<source src="Video.mp4" />
</video>
<div id="btn1" style="height: auto; width:10%; position: absolute; top: 0px; left:0px;" >
<a href="SeiteX.html"><img src="Buttonlinks.jpg"></a>
</div>
<div id="btn2" style="height: auto; width:10%; position: absolute; top: 0px; right:0px;">
<a href="SeiteY.html"><img src="Buttonrechts.jpg"></a>
</div>
Dazugehöriges CSS:
#btn1{
height:auto;
max-width:100%;
position:absolute;
padding-top:300px;
float:none;
}
#btn2{
height:auto;
max-width:100%;
position:absolute;
padding-top:300px;
padding-right:200px;
float:none;
}
video{
width:100%;
height:auto;
}
Alles anzeigen
Ich würde mich wirklich sehr, sehr freuen, wenn ihr mir bei diesem Problem weiterhelfen könntet:o
Liebe Grüße, Yuyu