CODEWITHSUNDEEP
htmlcssvideobackground
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Full Screen Video Background with content below the fold

Working on implementing a full screen video background with content under the fold.

So far I have been able to get the full screen video working without issue. The problem is I have been unable to figure out how to add content under the video. Aka the video should stop under the fold:

GOAL: http://www.awesomescreenshot.com/0fa4atfpec

HTML:

<div class="container-fluid">

<div id='videoBG' class="row">

<video autoplay loop muted poster="screenshot.jpg" id="background">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

<p id='mainHeader'> Header Title </p>


</div>
</div>

<div class="container-fluid">
<div class='row'> 

<h1> Start of the second section below the video</h1>

</div>
</div>

CSS:

#background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Upvotes: 0

Views: 1589

Answers (3)

Syden
Syden

Reputation: 8625

Make video container div#videoBG occupy 100vh. This way, you can impact inside elements such as #mainHeader without pushing the section below. Also, I added box-sizing: border-box & reseted margins & paddings to avoid unwanted gaps between sections.

Embed snippet breaks viewport height so check it externally:

External JSFiddle here

Upvotes: 1

Pixeldenker
Pixeldenker

Reputation: 142

You could give it a margin-top of 100vh, so 100% of the height of the viewport.

h1 { margin-top: 100vh; }

As I used here: https://jsfiddle.net/t2f1Lau6/1/

Upvotes: 1

Harper04
Harper04

Reputation: 375

You could try using the viewport size This quick test worked for me

<div style="background-color:red;width:100vw;height:100vh">
</div>
<div>
    hi
 <ul>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
 </ul>
</div>

Upvotes: 1

Related Questions