How to Replace Div Background with HTML5 CSS Video

Question

Currently have a div with its own background and struggling how to set the background as a video using CSS.

Current set-up is the following:

CSS FOR THE DIV:

.intro-header {
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
padding-bottom: 50px;
text-align: center;
color: rgb(255, 255, 255);
background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover;}

HTML FOR THE DIV:

    <div class="intro-header">

    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message">
                    <h2>Welcome To Little Mountain Media</h1>
                    <h1>WE BELIEVE IN THE POWER OF VISUAL MEDIA</h3>
                    <hr class="intro-divider">
                </div>
            </div>
        </div>

    </div>
</div>

As you can see, quite simple, just want a video in place of the into-bg.jpg

Thanks

Possibly duplicated question: http://stackoverflow.com/questions/3800813/video-as-site-background-html-5 — Guillermo, Jan 13 '15 at 19:25
Any ideas how to implement with above code, what I am struggling on> @Guillermo — Ryan Jacques, Jan 13 '15 at 19:33

Guillermo · Answer 1 · 2015-01-13T23:51:07.113

There are many ways. One is to use the jQuery VideoBG Plugin. jQuery is an JavaScript Framework which contains many useful functions to make JavaScript development faster and easier.

Download jQuery from http://jquery.com/download/ and include it into your HTML code:
```
<script src="jquery-2.1.3.min.js"></script>
```
Download the jQuery VideoBG Plugin from https://github.com/sydlawrence/jquery.videoBG (Only the .js file) and include it into your HTML code.
```
 <script src="jquery.videoBG.js"></script>
```
Add the follwing code JavaScript code to your HTML code and adapt it to your needs (Meaning the file names of the different video formats and the id or class of the element where the background should be placed. Here I used the class intro-header):
```
$('.intro-header').videoBG({
    position:"fixed",
    zIndex:-1,
    mp4:'christmas_snow.mp4',
    ogv:'christmas_snow.ogv',
    webm:'christmas_snow.webm',
    poster:'christmas_snow.jpg'
});
```

How to Replace Div Background with HTML5 CSS Video

1 Answers1