CODEWITHSUNDEEP
csshtmlhtml5-video
Mohamed Samy
Mohamed Samy

Reputation: 941

Fullscreen HTML5 Section Background Video

I tried to make Full screen HTML5 Section Background Video with css and HTML5 and found many articles, but not all with same concept.

The problem is that all the articles make the video with position: fixed; that make the video scroll with you. I need to found a way to make the video in the first section in the site only like this site.

The General Concept is :

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

HTML :

<video autoplay loop poster="polina.jpg" id="bgvid">
    <source src="polina.webm" type="video/webm">
    <source src="polina.mp4" type="video/mp4">
</video>

CSS :

video#bgvid { 
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

i make live example to test ur comments please check here

Upvotes: 1

Views: 6272

Answers (2)

jurjen
jurjen

Reputation: 73

try the code of @aditya with an

overflow-y: hidden;

on the container

Upvotes: 0

Aditya
Aditya

Reputation: 4463

Wrap the video inside a div like this and increase z-index of content,let me know if this works..

    #video_container {
     bottom: 0;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     background: url(polina.jpg) no-repeat;
     min-height: 720px;
    }
   #bgvid {
     min-width: 100%;
   }

<div id="video_container" style="overflow:hidden; background-size:cover;">
    <video autoplay loop id="bgvid">
       <source src="polina.webm" type="video/webm">
        <source src="polina.mp4" type="video/mp4">
   </video>
 </div>

Upvotes: 2

Related Questions