Sample Background Video

The original video can be view here

http://www.youtube.com/embed/BsekcY04xvQ?autoplay=1&color=white&controls=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&loop=1&html5=1&wmode=opaque

Header.php

<!-- Video Background Start-->
<div id="background" data-region="background" data-delay="5000" data-type="video">
<iframe id="content-video-bkg" src="http://www.youtube.com/embed/BsekcY04xvQ?autoplay=1&color=white&controls=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&loop=1&html5=1&wmode=opaque" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <script type="text/javascript">
// app.config.audioPlayerTracks = false;
jQuery(function(){ app.events.trigger('audioplayer.pause') });
</script>
<div id="background-pattern"></div> <div id="background-overlay" style="background-color:#000; opacity:0.7"></div>
</div>
<!-- Video Background End-->

CSS

/* Video Background */
#background {
position:fixed;
top:0;
left:0;
bottom:0;
width:100%;
background-color:#121212;
-webkit-transform:translate3d(0,0,0);
}
#background .background-image {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center center;
z-index:0;
opacity:0;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#background .background-image.state-init { opacity:0; }
#background .background-image.state-init.state-in { opacity:1; }
#background .background-image.state-over { z-index:1; }
#background #background-pattern, #background #background-overlay, #background #background-color, #background #content-video-bkg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#background #background-pattern {
background:transparent url('images/bkg-pattern.png');
background-size:2px 2px;
z-index:2;
}
#background #background-overlay { z-index:3; }
#background #background-color, #background #content-video-bkg { z-index:1; }
.admin-bar #background { top:28px; }

Also look at using http://dfcb.github.com/BigVideo.js/

Comments are closed.