内联Vimeo按钮覆盖

Question

试图创建一个按钮覆盖视频的设计，然而，它真的没有响应任何好的方式来实现这一点。它需要通过内联风格来完成，而不需要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>

Answer 1

要使项目垂直居中，可以组合使用top: 50%;和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>

​