CODEWITHSUNDEEP
htmlcsspositionhtml5-video
halle
halle

Reputation: 1

Position: Fixed; element is scrolling with entire page

I'm trying to place text over a video on my site, but to do this I had to use a position: fixed; element so the text would appear in front of the video. I thought that doing this would just fix it to the one spot and that position: absolute; was the one that would have kept the text in place when scrolling. I don't want the text to be visible once you've scrolled past the video. I'm also trying to keep the video in the center of the page. Right now I'm using a left and right margin of 120px but it's not perfect.

<div class="container">
    <video id="video" width="770" height="882" playsinline controls autoplay muted loop>
    <source src="video/Cage_Broken_Boy.mp4" type="video/mp4"/>
    </video>
</div>

<div class="overlay">
<h1>CAGE THE ELEPHANT</h1>
<h2 class="info">PERFORMING
    JUNE 27 7:00PM
    SARATOGA PERFORMING 
    ARTS CENTER
</h2>
</div>

/css/

video{
justify-content: center;
display: block;
width: 90%;
height: auto;
margin-left: 120px;
margin-right: 120px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}

.container { 
position:relative; 
}

.container video {
position:relative;
z-index:0;
}

.overlay {
position: fixed;
justify-content: center;
text-align: center;
top:50%;
left:50%;
z-index: 1;
transform: translate(-50%, -50%);
}

.info{
font-family: urw-form-expanded, sans-serif;
font-weight: 400;
font-style: normal;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: white;
}

Upvotes: 0

Views: 1623

Answers (1)

Dmitrij Kiltau
Dmitrij Kiltau

Reputation: 325

So you do want to use position: absolute; and use margin: 0 auto; or just margin: auto; to center the video.

You have to place the overlay inside the video container to make it work:

video {
    margin: 0 auto;
}

.overlay {
    position: absolute;
}

<div class="container">
    <video id="video" width="770" height="882" playsinline controls autoplay muted loop>
        <source src="video/Cage_Broken_Boy.mp4" type="video/mp4"/>
    </video>

    <div class="overlay">
        <h1>CAGE THE ELEPHANT</h1>
        <h2 class="info">PERFORMING
            JUNE 27 7:00PM
            SARATOGA PERFORMING 
            ARTS CENTER
        </h2>
    </div>
</div>

See this JSFiddle: https://jsfiddle.net/qcgv6znd/1/

Upvotes: 2

Related Questions