HTML/CSS: Overflow hidden not working, how to fix parent div?-CodePudding

Sorry for bad English, English is a second language

I have download a HTML template from https://html5up.net/fractal

Now I am trying to change background with video playing

    <body >
        <!-- Header -->
            <header id="header">
                <video autoplay loop muted plays-inline>
                    <source src="/assets/css/videos/karing1080.mp4">
                </video>
                <div >
                    <h1><a href="#">Widget</a></h1>
                    <p>helper</p>
                    <ul >
                        <li><a href="#" >Download/p></a></li>
                        <li><a href="#one" >More</a></li>
                    </ul>
                </div>
            </header>

This is css for video

video{
    opacity: .3;
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    height:auto;
    width: auto;
    
    top:0;
    margin: 0;
    overflow: hidden;
}

The problem is overflow does not work and horizontal scroll enabled.

I can tell that parent div is causing error but I do not know what and how to fix it.

I have spent so many hours on fixing it, plz let me know if you need more information for it

CodePudding user response：

First of all overflow: hidden is an attribute that you apply on a container to hide the overflowing children, you can't just apply it on a children to contain it inside a parent, that's the opposite.

But there's better solution, we don't really need to use overflow: hidden;.

Here's CSS that will put your video in the back:

#header {
  position: relative;
}

#header video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  object-fit: cover;
}

object-fit: cover stretches keeping the aspect ratio the entire video to fill given space, which is 100% width and height parent container (#header).

Also make sure parent of the video has position: relative - in your code it would be #header, like in the code above, otherwise you might be setting the container in relation to unwanted element.

That's all :)

CodePudding user response：

In order to have position: absolute working, the parent container needs a styling with position: relative. Try that and maybe give the parent container header also overflow: hidden.