Question

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

由于

    #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

这是你在找什么？

＆＃13;

  override func viewDidLoad() {
        if bad_condition == true {
            performSegue(withIdentifier: to, sender: self)
            return
        }
        super.viewDidLoad()
    }

＆＃13;

#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);
}

＆＃13;

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>

在此全屏视频下制作文字

2 个答案: