Can anyone help me with using the jQuery plug in videoBG to fill a top div with a video that has 100% width and height? I want the #top-video to fill the #top-content but nothing is showing up. Any suggestions would be appreciated. Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Dupont Studios</title>
<link href= 'style.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="waypoints.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>
<script>
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(direction) {
nav_container.toggleClass('sticky', direction=='down');
}
});
});
$('#top_video').videoBG({
mp4:'test.mp4',
scale:true,
zIndex:0
});
</script>
</head>
<body>
<div id = 'top-container'>
<div id = 'top-content'>
<div id = 'top-video'>
<span>Here is some text</span>
</div>
<div id = 'top-text'>
<div id = 'top-img'>
<img src='top-img.png' width = "600" height = '115'>
</div>
<h1 id = 'top-slogan'>A Video Production Studio</h1>
</div>
</div>
<div class = 'nav-container'>
<nav>
<div id = 'header-img'>
<img src='top-img.png' width = "450" height = '86.25'>
</div>
<div id = 'nav-items-container'>
<ul class = 'nav-items'>
<li class = 'nav-item'><a href='#'><b>w</b>hat</a></li>
<li class = 'nav-item'><a href='#'><b>h</b>ow</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>hy</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>here</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>ho</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id = 'main-container'>
<div id = 'main-content'>
<div id = 'main-content1'>
<section>
<h2>what we do</h2>
<p>We have built a boutique full service video producton studio quite literally in the heart of Dupont Circle.
Yes, our address is 21 Dupont Circle- we're racross from the south end of the dupont metro stop, right near the Krispy Kreme...mmm,good!</p>
<p>Unlike other video production studios, we have an exclusive focus on subscription based filming that
allows for organizations to build their brand and convey their ideas on a weekly, bi-weekly, or monthly basis.</p>
<p>
The benefits of subscription based video production allows us to more <mark class = 'blue-me'>deeply partner</mark> with our clients
and align interest for long term <mark class = 'blue-me'>strategic communication goals</mark>.
</p>
</section>
</div>
<div id = 'main-content2'>
<section>
<div id = 'video-text'>
<p>We have built a boutique full service video producton studio quite literally in the heart of Dupont Circle.
Yes, our address is 21 Dupont Circle- we're racross from the south end of the dupont metro stop, right near the Krispy Kreme...mmm,good!
</p>
</div>
<div id = 'video'>
<iframe src="http://player.vimeo.com/video/69176991?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
</div>
<section>
<div id = 'picture'>
<img src='test.jpg' width = "1200" height = '800'>
</div>
</section>
</div>
</div>
</body>
</html>