M Hamilton M Hamilton - 20 days ago 8
CSS Question

HTML5 video background - strange layer on top?

I am trying to add a video background to a page and have 2 problems/questions.


  1. I want the video stay in a div at the top of the page vs stay in full browser window (what is happening now)

  2. The video only appears after scrolling down the page. Almost as if there is a div over top. Can't figure it out.



Here is HTML and CSS:



/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section-content {
width: 50%;
display: inline-block;
}

/* Section 1
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#section1 .section-container {
height: 800px;
width: 100%;
text-align: center;
background-color: ;
padding-top: 100px;
}

video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('') no-repeat;
background-size: cover;
transition: 1s opacity;
}

/* Section 2
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#section2 .section-container {
height: 800px;
width: 100%;
text-align: center;
background-color: ;
}

/* Section 3
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#section3 .section-container {
height: 800px;
width: 100%;
text-align: center;
background-color: ;
}

<video autoplay muted loop id="bgvid">
<source src="http://callmenick.com/_development/video/full-screen-background-video/media/demo.mp4" type="video/mp4">
</video>

<!-- Navigation -->
<nav>
<div class="container-nav">
<a href="#" class="navabout">?</a>
</div>
</nav>

<!-- Posts-->
<section id="section1">
<div class="section-container">
<div class="section-content">
<h1>Main headline is here</h1>
<h2>Sub headline is here about stuff.</h2>
</div>
</div>
</section>

<section id="section2">
<div class="section-container">
<div class="section-content">
<p>Assertively synergize enterprise-wide</p>
<p>Globally exploit value-added mindshare for B2C synergy. Authoritatively orchestrate technically sound meta-services and revolutionary infrastructures. Assertively synergize enterprise-wide communities before adaptive internal or "organic" sources.</p>
</div>
</div>
</section>




Answer

Answer for 1) Change your video position:fixed to position:absolute to keep it at the top.

Answer for 2) Probably the video takes time to load due to external link and also large size. Try downloading the video and put it in your web resources folder to load it locally and also see if the size can be reduced of the video if its big. (Need more detail on this to solve as not able to reproduce sample: http://codepen.io/Nasir_T/full/rWjxeN/)

[Edit for issue # 2] - User found the problem and fixed on his own

Comment from M Hamilton: Got it! Had height:100%; margin: 0; padding: 0; in a body tag. Removed these and it works fine.