HTML video overlay partially pushing down video

Question

After reading some answers on stack I managed to make a div overlay for my youtube video. The description said it would let me add as many divs in the constructed div, which made sense to me.

However, the second div I put in there is pushing down my video. I tried tweaking with the position and z-index but this didn't help. Why is only one of the divs pushing the video down? Shouldn't the parent div make sure they both hover over the video?

(btw, the second div will be hidden later with jquery, so that the first div can open it by clicking on it.)

I wrapped the video overlay in containers:

    .outer-container {
        width:68%;
        height:575px;
        margin-left:2%;
        background-color:#97D3A3;
        display:inline-block;
}
.inner-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}
.video-overlay {
    width:100%;
}
.video {
    width: 100%;
    height: 100%;
}

.overlaycontent {
    width:100%;
    height:100%;
    background-color:#fff;
    color:#000;
    position: relative;
    z-index: 98;
}

.overlayinfo {
        position: relative;
        z-index: 99;
        height: 0px;
        border-top: 4px solid #F1860B;
        width:100%;
        max-width:816px;
        text-align:center;
    }

    .overlayinfo img {
        margin:0px auto;
        width:53px;
    }

And this is my HTML:

<div class="outer-container">
        <div class="inner-container">
            <div class="video-overlay">

                <div class="overlayinfo">
                    <a href="#" class="infotrigger"><img src="#"></a>
                </div>
                <div class="overlaycontent">
                    Lorem ipsum dolor sit amet
                </div>


            </div>
                <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/6ttrZ11csfI?autoplay=1&controls=0&loop=1&playlist=6ttrZ11csfI&showinfo=0&modestbranding=1" frameborder="0"></iframe>
        </div>
    </div>

Here is a fiddle to see the complete picture: https://jsfiddle.net/boe5xLte/2/

If I understand corretly You are missing: `.overlaycontent { height: 0;}` or better use `position: absolute` — Bogdan Kuštan, Jul 13 '16 at 09:22

score 1 · Accepted Answer · answered Jul 13 '16 at 13:02

You want a wrapper which is always over the video but does not somehow "move" it because of its own (or its childrens) dimensions.

You already set your .inner-container to position: relative. Now you have to position your .video-overlay so it moves out of content-flow. You achieve it by setting:

.video-overlay {
    /*to position it out of content-flow*/
    position: absolute;

    /*to span it to its parents borders*/
    top: 0; right: 0; bottom: 0; left: 0;

    /*to always let it be on top of your subsequent video container*/
    z-index: 1;
}

I updated your fiddle accordingly: https://jsfiddle.net/boe5xLte/3/

The top, right, bottom and left values can be adjusted and resemble the distance between this site of the .video-overlay and the same site of the .inner-container.

HTML video overlay partially pushing down video

1 Answers1