Question

我有以下引导代码：

<section>
  <div class="container-fluid">
    <div class="row">
      <video>
        ...source...
      </video>
      <button>Play</button>
    </div>
  </div>
</section>

该部分的高度设置为560px。视频标记的高度为：auto，宽度为100％。如何添加“播放暂停”按钮，无论屏幕尺寸如何，该按钮始终位于可视视频区域的同一位置？

Answer 1

使用相对的度量单位，例如%和em
使用插入为::before或::after
将position:relative添加到.row，将position:absolute添加到#play，以准确定位#play。
将bottom或top #play添加到此值：calc(50% - height of #play/2)。注意：某些字体图标不是垂直居中，因此请使用该公式并进行相应调整。
将left或right #play添加到此值：calc(50% - width of #play/2)。
将z-index:-1添加到.row，将z-index:1添加到#play

演示

＆＃13;

.row {
  display: table-cell;
  position: relative;
  z-index: -1
}

#play {
  display: block;
  position: absolute;
  z-index: 1;
  /* 50% - (height/2) [Using a font icon, adjust accordingliy] */
  bottom: calc(50% - 5em);
  /* 50% -(width/2) */
  left: calc(50% - 4em)
}

#play.idle::before {
  content: '\2bc8';
  width: 8em;
  /* AR 16:9 is width * .5625 */
  height: 4.5em;
  color: cyan;
  font-size: 8em
}

＆＃13;

<section height='560'>
  <div class="container-fluid">
    <div class="row">
      <video id='vid' src='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' width='100%' height='auto'></video>
      <div id='play' class='idle'></div>
    </div>
  </div>
</section>

＆＃13;

Answer 2

您可以将按钮的位置设置为＆＃34;绝对＆＃34;，然后将其放置在顶部，底部，左侧，右侧。

Btw绝对位置将相对于播放/暂停按钮的最近定位祖先进行设置，因此如果您的可视视频区域设置为相对位置，它将始终位于相对于您视频区域的相同位置。

在播放程序中定位播放按钮和视频背景部分

2 个答案:

演示