Question

我正在尝试全宽视频following代码就是一个例子。我不想通过给予视频响应来限制视频，但是当我在小屏幕上观看视频时，在其上方定位的内容正在向下推。移动如何确保视频上的文字显示在同一位置，即使屏幕较小，并且其下方的文字或面板也隐藏在视频后面或隐藏/重叠视频。

我想让视频和下面的文字变得像样，而不是跳跃或隐藏。我的位置错了吗？

.centered{
    position: relative;
    top:50%;
    z-index: 1;
    color:#fff;
    text-shadow:1px 1px 10px #000;
}
video{
    background-size:cover;
    width: 100%;
    position: absolute;
    top:0;
}

Answer 1

确保父元素包含position: relative;并包含视频，并且父级会根据视频进行调整。我这样做是通过获取视频的宽高比并创建填充（56.2％）为视频的宽高比创建空间（使用iframe section here中的技术），然后将文本放在该父元素中并使用position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);的组合可将文字置于视频中心。

* {margin:0;padding:0;}

#video {
  height: 0;
  padding-top: 56.2%;
  position: relative;
  overflow: hidden;
}

#video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(polina.jpg) no-repeat;
  background-size: cover;
}

#video h1 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  text-shadow: 1px 1px 10px #000;
  font-size: 36px;
  font-family: sans-serif;
  text-align: center;
}

<div id="video">
  <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
    <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
  </video>
  <h1>We Evolve with our students
</div>

Answer 2

我认为link会帮助你集中精力;）关于定位文本，您可以使用theDude值。即

vh

此外，this guy from the top有一个关于绝对定位的好例子;）

Link关于.text { position: absolute; top: 30vh }

Answer 3

将介绍文本放在绝对元素中吗？

http://codepen.io/anon/pen/NdpyVX

<section class="vid">
<video controls  poster="http://www.webestools.com/page/media/videoTag/BigBuckBunny.png">
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.mp4" type="video/mp4">
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.ogg" type="video/ogg">
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.webm" type="video/webm">
    Your browser does not support the video tag or the file format of this video. <a href="http://www.webestools.com/">http://www.webestools.com/</a>
</video>

<div class="intro">
   This is something cool for kids who want to watch videos 
</div>
</section>

Answer 4

这是具有中心类的div的css。希望这会帮助你。将位置更改为绝对并使用 calc函数将文本定位到顶部

的中心位置

.centered 
{
 position: absolute;
 top: calc(100% - 50%);
 text-align : center; 
 left : 0;
 right : 0;
 z-index: 1;
 color:#fff;
 text-shadow:1px 1px 10px #000;
}

定位时控制文本的位置

4 个答案: