Inline Vimeo button overlay-CodePudding

Trying to create a button over-video kind of design, however, it is really not that responsive any good ways to achieve this. It needs to be done by inline-style and without javascript.

<div class="vimeo-container">
        <div class="overlay">
            <div class="button-container">
                <button>Test Button</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>
.vimeo-container .overlay{
    position: absolute;
    width: 100%;
    height:100%;
    z-index:999;
    top: 300;
}

.vimeo-container .overlay .button-container{
    width:100%;
    text-align:center;
}

.vimeo-container .overlay .button-container button{
    color:#000;
    
}

.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
</style>

CodePudding user response：

To center items vertically, you can use a combination of top: 50%; and transform: translateY(-50%);

.vimeo-container .overlay{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 999;
}

.vimeo-container .overlay .button-container{
    width:100%;
    text-align:center;
}

.vimeo-container .overlay .button-container button{
    color:#000;
}

.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;

<div class="vimeo-container">
  <div class="overlay">
      <div class="button-container">
          <button>Test Button</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>