Javascript videoBG

Javascript videoBG

本文关键字：videoBG Javascript      更新时间：2023-09-26

我试图在videoBG中使用jQuery插件，让视频填充100%宽度和高度的顶部div。我想要#顶部视频来填充#顶部内容。问题是什么都没有出现。有什么建议吗？谢谢

<!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&amp;byline=0&amp;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>

您不应该使用#top-video而不是#top_video作为选择器吗？

相关文章：