Question

似乎无法做出我想要的工作，所以请问专家。

我想要实现这个经典的例子： http://codepen.io/anon/pen/rWwaRE

但是在文本块和（如果可能的话）之间开始滚动它就像这个页面一样（向下滚动以查看我的意思）： http://www.abc.net.au/news/2016-11-14/four-corners-broken-homes-child-protection/7987450

如果我只是按照Polina示例，我可以将视频设为全屏，但是当我尝试将其放在其他文本块之间的页面中时，我不能。它总是只是恢复到一个盒子或视频的实际大小。

如果可能的话，我想保持简单 - 如果可能的话，只有CSSS而不是Javascript。此外，如果视频没有自动启动，只要它是全屏的。

这就是我所拥有的：

HTML：

<!-- A large block of text -->
<section id="#" class="intro">
  <div class="intro-body">
    <div class="container">
        <h1>TEXT </h1>
        <h4>MORE TEXT</h4>    
    </div>
  </div>
</section>


<!--This bit needs to be full screen etc -->
<section>
    <video controls id="BG">
        <source src="video/MAIN.mp4" type="video/mp4">
    </video>
</section>

<!-- Another large block of text -->
<section id="#" class="intro">
  <div class="intro-body">
    <div class="container">
        <h1>TEXT </h1>
        <h4>MORE TEXT</h4>
    </div>
  </div>
</section>

CSS（视频）：

.video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

所有文字组件都工作正常，我只是希望视频看起来像上面的链接 - 如果可能的话？

任何建议都会很棒！

由于

Answer 1

我将身体位置作为相对和子部分位置作为绝对，这样这些部分将相互重叠

可以检查视频是否全屏播放。你期待这样的事吗？如果没有请描述

    .videoSection{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

http://plnkr.co/edit/0SpRNwJQrG22lZn08uy1?p=preview

Answer 2

这是我制作的快速版本，我认为您正在寻找：https://jsfiddle.net/z9e1c3gb/2/

基本上我所做的只是给视频一个id而在css我做了它，所以视频将是100％的屏幕高度和100％的宽度。

＆＃13;

.divOne{
  background-color: #fff;
  width: 100%;
  height: 100vh;
}
.divTwo{
    background-color: black;
    width: 100%;
    height: 100vh;
}
#video{
  height: 100vh;
  width: 100vw;
}
.divThree{
    background-color: blue;
    width: 100%;
    height: 100vh;
}

＆＃13;

<div class="divOne">

</div>
<div class="divTwo">
    <video controls id="video" style="width:100%; height:100%">
        <source src="video/MAIN.mp4" type="video/mp4">
    </video>>
</div>
<div class="divThree">

</div>

＆＃13;

HTML视频全屏内联

2 个答案: