时间戳

首页 > 解决方案 > 内联 Vimeo 按钮覆盖

html - 内联 Vimeo 按钮覆盖

问题描述

然而，试图创建一种按钮式视频设计，实际上并不是任何好的方法来实现这一点。它需要通过内联样式完成，并且没有 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>

标签： htmlcssinline-styles

解决方案

要垂直居中项目，您可以使用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>

推荐阅读