Is there a way to create a button over-video design that is responsive, without using JavaScript and only inline styles?
<div class="video-container">
<div class="overlay">
<div class="button-container">
<button>Click Me</button>
</div>
</div><iframe allowfullscreen frameborder="none" src="https://player.vimeo.com/video/55157689" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Test">
</iframe>
</div>
<style>
.video-container .overlay{
position: absolute;
width: 100%;
height:100%;
z-index:999;
top: 300;
}
.video-container .overlay .button-container{
width:100%;
text-align:center;
}
.video-container .overlay .button-container button{
color:#000;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 50%;
left: 0;
width: 100%;
</style>