内联 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>

内联 Vimeo 按钮覆盖

Inline Vimeo button overlay

html

css

inline-styles