CODEWITHSUNDEEP
javascriptjquerycsshtmlvideo
PowerUser
PowerUser

Reputation: 812

HTML5 video - overlay a div above it

So I have the following code:

<div class="content">
    <div class="video-container">
        <video controls="true" autoplay="autoplay" loop="loop" muted="muted" preload="auto">
            <source src="/videos/bg-video.mp4" type="video/mp4">
            <source src="/videos/bg-video.ogv" type="video/ogv">
            Please upgrade your browser so that it supports HTML5 videos.
        </video>
    </div>
    <div class="text"><!-- ... --></div>
</div>

And that's the CSS:

.content {
    position: relative;
    z-index: 5;
}

.video-container {
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

video {
    z-index: -1;
    height: auto;
    position: relative;
    min-height: 100%;
    min-width: 100%;
}

So the .text div serves as the actual content of the page. It is a div in the middle of the page and the video appears as a background behind it. So here's the problem: When I right click on the video I can see options such as unmute, full screen, pause, play speed, show/hide controls/stats, view/copy video, save, share email video. That's why I added the z-index: -1; on the .video-container. But now I can't select any text in my .text div?! That's really frustraiting... I added the javascript/jquery tag in case there's a JS solution. However I'd rather accept a markup/css solution because JS can be disabled at any time by the user...

Upvotes: 0

Views: 3388

Answers (1)

im_benton
im_benton

Reputation: 2621

When z-indexing an element you need to make sure to z-index the other elements your are layering as well.

.text{
    position: relative;
    z-index: 9;
}

Upvotes: 1

Related Questions