在此全屏视频下制作文字

Question

有人可以帮助我吗？我正在为学校制作一个项目，我有一个很酷的想法，将这个全屏视频制作成一种 home/welcome 页面，当他们向下滚动时，他们会看到普通文本和其他内容。

谢谢

    #myVideo {
    position: fixed;

    min-width: 100%;
    min-height: 100%;
    }

    .content {

    text-align: center;
    font-size: 500%;

    width: 100%;
    padding: 20px;
    color: #FFF;
    font-family: 'ds';
    mix-blend-mode: difference;
    filter: drop-shadow(.05em .05em orange);
    }

   
     <link rel="stylesheet" 
     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>



     <div><video autoplay muted loop id="myVideo">
      <source src="xxx.mp4" type="video/mp4">
      </video>
       <div class="content">
       <p>$WHY ISNT THIS WORKING$</p><br>
       <p>$CZP$</p>
     </div></div>
    <h1>This text needs to be under the video</h1>

Answer 1

这是您要找的吗？

#myVideo {
width: 100vw;
height: 100vh;
}

.video-container {
min-width: 100vw;
min-height: 100vh;
background-color: green;

}

.content {
background-color: yellow;
text-align: center;
font-size: 500%;
width: 100%;
padding: 20px;
color: #FFF;
font-family: 'ds';
mix-blend-mode: difference;
filter: drop-shadow(.05em .05em orange);
}

<div class="video-container">
  <video autoplay muted loop id="myVideo">
    <source src="xxx.mp4" type="video/mp4">
   </video>
</div>
<div class="content">
  <p>$WHY ISNT THIS WORKING$</p><br>
  <p>$CZP$</p>
  <h1>This text needs to be under the video</h1>
</div>

Answer 2

只需将 position: relative; 用于 #myVideo

因为你用过fixed

        #myVideo {
        position: relative;

        min-width: 100%;
        min-height: 100%;
        }

        .content {

        text-align: center;
        font-size: 500%;

        width: 100%;
        padding: 20px;
        color: #FFF;
        font-family: 'ds';
        mix-blend-mode: difference;
        filter: drop-shadow(.05em .05em orange);
        }

       
         <link rel="stylesheet" 
         href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>



         <div>
<video autoplay muted loop id="myVideo">
          <source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
          </video>
           <div class="content">
           <p>$WHY ISNT THIS WORKING$</p><br>
           <p>$CZP$</p>
         </div></div>
        <h1>This text needs to be under the video</h1>

在此全屏视频下制作文字

Make text under this fullscreen video

html

css

html5-video

fullscreen