CODEWITHSUNDEEP
htmlcssvideobackground
JJhtmlcss
JJhtmlcss

Reputation: 1

Video background and text inside of div does not scroll with rest of the page?

I'm trying to make a video background with text over it positioned in a certain way but when I scroll the whole page up the text and video do not scroll/move? What am I doing wrong?

  position: fixed;
  right: 0;
  bottom: 0;
  min-width:100%;
  min-height:100%;
  color: #fff;
  z-index:0;
  text-shadow: 0 0 5px #000000;
}

 .overlayText {
position: fixed;
top: 25%;
left: 25%;
color:#fff;
z-index:1;
}

<div class="bannervideo">
  <video autoplay loop muted class="bannervideo" poster="video.jpg">
    <source src="/s/Blueheadervideos.mp4" type="video/mp4">
  </video>
  <center><div class="overlayText">
    <p style="font-size:3vw; font-weight: 500;">Headline here</p>
    <p style="font-size:1.5vw; font-weight: 500;">tagline</p> </div>

     <div class="overlaybottomText">
<p style="font-size:1.5vw;">More words go here </p> 
  </div>  ```

Upvotes: 0

Views: 888

Answers (1)

Kevin Ang
Kevin Ang

Reputation: 71

The position: fixed; on both selectors will fix elements relative to the window. Try position: absolute instead for .overlayText

.overlayText {
    position: absolute;
    top: 25%;
    left: 25%;
    color:#fff;
    z-index:1;
}

and position: absolute or position: relative for the parent element .bannervideo.

Upvotes: 1

Related Questions