Video background in JavaScript

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&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>

Answer №1

Is it possible that the correct selector to use is #top-video instead of #top_video?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The A-frame inspector tool is not very useful within the Glitch platform

Just want to preface this by saying that I am completely new to both a-frame and Stack Overflow. Lately, I've been experimenting with A-frame templates similar to the one linked here: When I pull up the inspector for the example above (ctrl-alt-i), ...

Is there a way to prevent the second ul from appearing?

Seeking assistance with navigation. When clicking on the "Athletics" tab in the provided link, the second ul displays. Is there a method to hide this second ul and have it only appear upon hovering? ...

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

Using codeigniter and JQuery, I have developed a unique Javascript function to selectively extract a specific portion of text

I'm currently working with the following syntax: $("#orderbynumber").autocomplete( { source: "get_orders_by_order_number", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var select ...

One way to determine whether .ajax is using Get or POST is to check the type parameter

I have a query: $.ajax({ url: "http://twitter.com/status/user_timeline/treason.json?count=10&callback=?", success: function (data, textStatus, jqXHR) { }, error: function (jqXHR, textStatus, errorThrown ...

Troubleshooting issue with JavaScript sorting function failing to arrange elements in ascending

I'm having trouble sorting numbers in ascending order using JavaScript. Here's the code snippet: <h2>JavaScript Array Sort</h2> <p>Click the button to sort the array in ascending order.</p> <button onclick="myFunctio ...

Steps to record and upload a video directly to the server using getusermedia

For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...

What could be causing my external JavaScript file to not function properly upon loading my HTML file?

I have organized my code by separating the HTML and JavaScript portions. The JavaScript code is now in its own separate file and I use 'script' tags to reference it in the HTML file. Within the JavaScript code, I have two functions - one creates ...

Tips for adjusting the margin of a print document in a printTask?

Is there a way to achieve a borderless print? Currently, my printed output has a border around it. I would like the image to start at the top left corner without any borders. I attempted to set a negative margin to the print-style box, but it resulted in ...

The Jest snapshot test fails to capture any styling applied to children components

Struggling with creating a snapshot test for a straightforward react-native component. Jest's snapshot lacks necessary styling and content details for the single child of the component. The component is a basic button from native-base with an icon em ...

Using the Unleash Feature server in a browser for React projects: A step-by-step guide

I'm currently working on implementing the unleash feature toggle in my React Project. Everything is running smoothly with the backend server (thanks to the Java SDK), but I've hit a roadblock when it comes to making unleash requests from the brow ...

Ways to retrieve a specific object property from an array of objects within a click event listener?

I have instantiated multiple object constructors and stored them in an array which I loop over to display as a list. Now, I am trying to extract the name property from that list to use in an onclick event handler (not included in this code). I am unsure of ...

Initiate the command with given parameters

Currently, I am utilizing a combination of React, Redux, Rxjs, typesafe-actions, and TypeScript to invoke an action with parameters. Here is my current code: Actions: import { createAsyncAction } from 'typesafe-actions'; import {ICats} from &ap ...

Perform calculations for product and sum when button is clicked

I received the following task for an assignment: Develop 3 functions along with a form. The first function should execute upon button press and utilize the other 2 functions. These two functions are supposed to compute the sum of two numbers and the ...

Having issues with InstaFeed (search) feature and jQuery Mobile

As a new developer, I am working on my first JQM site. However, I am facing an issue with my search input form where the instafeed photos do not show up until after a manual page refresh following submission. Despite numerous attempts, I cannot seem to res ...

Steps for extracting a portion of the current page's URL

Can someone help me extract a specific part of the current URL using JavaScript? The URL looks something like this: I need to isolate the number "3153038" from the URL and store it in a JavaScript variable. Thank you! ...

Real-time audio feed permanently stuck in Chromium-powered web browsers

Here is how the audio element appears. No interaction seems to take place with it. (Experimented on ungoogled chromium, Edge, and an android device using a default Chrome browser) Below is the HTML code for the audio element: <div> <audio co ...

When using ODataConventionModelBuilder in Breeze js, the AutoGeneratedKeyType will consistently be set to 'none'

I am working with a straightforward entityframework poco object public partial class Location: Entity { [Key] public int Id { get; set; } public string Description { get; set; } } The baseClass Entity is structured as below public abstract c ...

Steps to execute a JSON file once another JSON has been successfully loaded

I'm facing a similar challenge to the one presented in this question. However, I need to load an additional JSON file after the when() method is executed. Essentially, I want to retrieve JSON data within the when() function and then use that informati ...

The Firefox extension is unable to activate any click events

Currently, I am developing a Firefox add-on with the goal of automatically filling in login form fields and submitting the login. For each website, I have access to various identifiers such as ids, classes or xpath, depending on what is provided by the web ...