0

I have a div in which i want to add Video in the background just like the image but i am not getting how to do it..Here is the CSS where i want to add the video..

.page-section {
    width: 100%;
    min-height: 800px;
    padding: 50px 0;
    border-bottom: 2px solid #fff;
}

.page-section#intro {
   min-height: 400px;    
}

and here is the HTML Div..

 <div class="page-section">
 </div>

I have tried to add video like this but its not working..

.page-section#intro {
min-height: 400px;
background: url(Video/Sapno.MP4) bottom center no-repeat;
}

Please help me to add the video from css into the background of Div..

Hansal Mehta
  • 185
  • 2
  • 4
  • 14

2 Answers2

0

@Hansal, I don't think the background property accepts videos as valid urls. They can only take bitmaps, SVG images, colors and gradients as values – it is possible to fake the appearance of a background video by forcing it behind other HTML elements. There is a propery called z-index which takes care of the 'depth' of elements on the page.

You could try something like this (simple video tag in HTML5):

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

You could style the video tag like this:

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

Here, the essential part of the css is setting the z-index of this element to -100 which ensures it stays in the background allowing other elements to come on top of it. You could try a similar approach with your corresponding html elements. Hope it helps.

Vivek Pradhan
  • 4,777
  • 3
  • 26
  • 46
  • OK ..I got your Point .One little clarification ,How can i set height of ` – Hansal Mehta Oct 07 '14 at 06:01
  • @HansalMehta, you set the height of the `video` tag like any other `html` element. In the `css` I've provided, I set the `min-width` and `min-height`. You can modify that to suit your needs. If it works for you, do mark the answer as accepted so others might also benefit out of it. Thanks – Vivek Pradhan Oct 07 '14 at 06:03
  • Ok.I did it by adding `min-height: 70%;` but now my video is getting reduced/cut from bottom Which i dont want ..How to avoid it and show the full video in `70%` height..Please help – Hansal Mehta Oct 07 '14 at 06:34
  • Any Suggestions on the same? – Hansal Mehta Oct 07 '14 at 06:49
0

Try it.

DEMO

.page-section video{

position: fixed;
right: 0;
bottom: 0;
top:0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;

}
Mukul Kant
  • 7,074
  • 5
  • 38
  • 53