Landing page with background video

1

I’m trying to autoplay a video on loop while having some overlay text like a hero image.

What am I doing wrong? My codepen is here.

Thanks in advance :slight_smile:

2

What’s the issue?
You have the text overlaying and the video is autoplaying and looping! :smile:

But if you refer to the overflow, write this

iframe{
width:100%;
min-height:400px;
  height:100vh;
max-height:600px
}

And remove width and height from the iframe element in the html

1 Like
3

insert your headline inside div#video

now add this code

div#video{
display:flex;
justify-content:center;
align-items:center}

then make a css class and add it to your title/headline div

.my-title-on-video{
position:absolute;
z-index:11111;
}

then see the result, and understand the code and make it your own style

1 Like
4

I wanted the video to be the background and the text to be the foreground :slight_smile:

5

Thx, i’ll try it out ! :smiley:

1 Like
6

Hello,

What do you mean by headline ?
I tried to structere it like this:

<html>
<head></head>
<body>
<header></header>
<main>

<nav></nav>
<div>
<video></video>
<content-overlay></content-overlay>
</div>
</main>
</body>
</html>
1 Like
7

for video add this css

z-index:-111

for content-overlay add this css

position:absolute
8

That solved it, thank you very much for your help!

1 Like