CODEWITHSUNDEEP
csshtmlhtml5-video
Arbejdsglæde
Arbejdsglæde

Reputation: 14088

Show div on top of background video tag

I want to show my custom div on top of background video, how I can do it in a right way.

<section>
    <video autoplay muted id="bgvid" loop>
        <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/mp4">
    </video>

    <div class="info">
        <h1>Welcome dear Friend</h1>
    </div>
</section>

<section class="about" id="about" data-content="about">
</section>

I created next style but my class="info" is just under video.

video { 
    position:fixed;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
 /*background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;*/
  background-size: cover;
  transition: 1s opacity;
}

section {   
    position: relative;
}
    section.video 
    {
        /*height:400px;*/
    }

    section.about 
    {
        background-image:url(../Images/backgrounds/blue.jpg);
        background-repeat:repeat;
        height:400px;
    }



.info { 
    /*position: absolute;z-index:1000;*/
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 33%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;

}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}

In case position fixed for video it is going down about section.

Upvotes: 0

Views: 3197

Answers (3)

Chad W
Chad W

Reputation: 420

Here's how I do it... In this example we have a video background and some text that is vertically-centered, left aligned.

Example fiddle here

<div class="video-container">
    <video autoplay loop class="hero-video">
        <source src="path/to/video" type="video/webm"/>
        Your browser does not support the video tag.
    </video>
    <div class="hero-caption">
        <div class="hero-caption-inner">
            <h1>Hello.</h1>
        </div>
    </div>
</div>

CSS:

.video-container {
    position: relative;
    padding-top: 56.25%; /* this gives you responsive aspect ratio */
    overflow: hidden;
}

.hero-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display:inline-block;
}


/* in this example we are "vertically-centering" the caption */
.hero-caption {
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    font: 0/0 a;
}

.hero-caption:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle; 
}       


.hero-caption-inner {
    font: 16px/1 Helvetica; /* Reset the font property */
    display: inline-block;
    vertical-align: middle;
    text-align:left;
    width: 100%;
 }

Upvotes: 2

Michael Dziedzic
Michael Dziedzic

Reputation: 543

Try taking the <video> out of the <section> element. So the entire <section> can rest on top of the background <video>.

Upvotes: 0

YourFriend
YourFriend

Reputation: 434

do you want to put video in the background? You can use z-index:-1;, to make div appear in the background.

z-index:0; will appear above z-index:-1 and so on

Upvotes: 0

Related Questions