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

【问题标题】：Positioning a play button and a video background section in bootstrap在引导程序中定位播放按钮和视频背景部分
【发布时间】：2017-12-20 09:27:14
【问题描述】：

我有以下引导代码：

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

该部分的高度设置为 560 像素。 video 标签有一个 height: auto 和一个 width: 100%。如何添加一个播放暂停按钮，无论屏幕大小如何，它都始终保持在可视视频区域的同一位置？

【问题讨论】：

使用以 % 为单位的绝对定位。

标签： html css twitter-bootstrap

【解决方案1】：

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

演示

.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
}

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

【讨论】：

谢谢。我知道使用绝对定位和底部属性，但没有考虑 calc！

【解决方案2】：

您可以将按钮的位置设置为“绝对”，然后将其定位为上、下、左、右。

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

【讨论】：