I think I am close to having it work in a Drupal 7 environment but problems remain.

Assuming that all references are relative to the location of the query,videoBG.js file, I created a folder in the site's "file" section called videoBG within which I located the query.videoBG.js file and the assets folder. The only difference is that the query.js file is located elsewhere as a global resource.

Inspecting the results, I look at the script.js which is reporting the error:
script.js:2TypeError:'undefined' is not a function (evaluating '$(document)')

I have loaded the video assets into the asset folder and reference them exactly as you have.

Any suggestions as to what could be 'undefined'?

IE 10 does not play the video neither shows the poster image, but the page background.
Has anybody ran across this issue and fixed it?

Hi!

How can I stop the loops and load back a regular homepage please ?
(without any video background)
Using it as a video intro in fact.

Thanks

Honestly... its perhaps me, but I couldn't get it work fullscreen (last master repo).
More than that, when I got look at the produced HTML code, I was really afraid :

This code seriously embed one body tag inside one another body tag.
WTF !

Is it a bug from my use or it is just "normal". If normal, I would seriously advice users to not use this, this is totally nonsense.

Produced code :

I'm curious about use of video in a background of a div on iOS devices. When I use your script (which is great, thank you) I'm getting the poster image with a play button overlay. I'm fine with no video on iOS and just the poster image, however, that play button kinda sucks since I have text on top of my video :-/

Any way around this?

Hi,

I want to use this plugin but there appears to be an error in the jquery.js 1.5.1 with it on line 16 "uncaught referenceError: selector not defined"... i just downloaded the zip to test out the demo's...

if i change this to the latest version of jquery 1.11.0, then the same error appears but in jquery.videoBG.js on line 20...

hope you can fix it...

-cheers

for Chrome 26.x and above, WIN

Hello, any chance this will work in Safari?
(Currently using Win 7 Pro 64bit, Safari 5.1.7)
Thanks
Tom

Is it possible to load more than one video in a row with this plugin?

resize on window size change

Hi Syd,

Is it possible to change the playback speed? Normally it would work (in some browsers) like this:

But my knowledge is too limited to change your script.

Is there an option?

jquery.videoBG is already available in bower search

>bower search jquery.videoBG
Search results:
    jquery.videoBG git://github.com/sydlawrence/jquery.videoBG.git

however, this repo lacks bower descriptor file. adding bower.json can greatly help people already using bower to track versions, main and ignore files. our project, for example, uses https://github.com/ck86/main-bower-files to include all files specified in bower.json "main" section.

could you please add bower.json file to repo?

Hi, Cool plugin, I like the way you handle different video file types for different browsers. I started implementing your plugin into our app at the request of a customer, it broke all of the js on our site, I found the cause to be the way the wrapper divs are added:

// move the contents into the wrapper
wrap.html(container.html());

You can add the wrapper this way to copy events over and not break all the other js:

// move the contents into the wrapper
wrap.html(container.clone(true));

The other thing, we have a page that completely breaks when the videobg is added to the page, I think it could be conflicting with a twitter widget or something. I think we just wont use it on that page though.

Hi
I'm trying to embed videos with your Video bg script. Everything works well, in Chrome and Safari.
But in FF the Video doesn't play. And I dont know why. Maybe you have an idea because I don't know what to do anymore.

You can find my page here: http://aareschwumm.ch/video1.php

• When viewing the page with firebug you can see, that your script loads properly.
• If I drag the webm videofile from my desktop to FF it also works. So the webm video is converted properly.

I don't know what to do anymore. Do you have any idea?

Shouldn't the css property top or left be removed when changing aspect ratio on setFullscreen function? For example: you have left set to -100px shift, when you resize your window to the opposed aspect ratio so you have to add top ratio, the previous -100px are still set.

what is the selection with this. also i have question with responsive how video will be center?

thank you.

Hey, maintainer(s) of sydlawrence/jquery.videoBG!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library sydlawrence/jquery.videoBG is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "sydlawrence/jquery.videoBG",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I'm trying to use this as a background in a part of my site that uses a scrolling script.
The site is this one:

http://juliawallin.se/newsite/

CSS: http://juliawallin.se/newsite/base.css

Script: http://juliawallin.se/newsite/assets/script.js

If you go to the site, you will see that instead of the poster, the white background of the div section-1 is shown. I can't seem to figure out why.

Does anyone have a clue? Would appreciate some help! I would be forever thankful!!!

Hi,

This library is nice and perfect for a project I'm working on right now. The only problem I've met is that the autoplay parameter did not seem to work. If you set to false it will still start right away.

I solved the problem by adding 3 lines in your code (line 153) :
if (options.autoplay) {
$video.attr('autoplay',options.autoplay);
//I added the 3 following lines
}else{
$video.removeAttr('autoplay');
}

and it works better now. :)

I tried your plugin and somehow my video is too zoomed in for my container. Does it depends on the div's width/height or does it calculate somehow by the video resolution ? Thing is I don't know if it's the container's fault. I use fullpage.js and one of the slides has the video background.

Thanks.

Please provide a destroy method which will remove all bounded events and destroy a <video> tag

I am using the video background for the hero area of the homepage. While it loops correctly on all other browsers (Firefox, Safari, IE, etc.), it doesn't loop correctly on my Chrome (Mac OS). There is a solid minute of black screen between loops. Anyone encountered this and knows how to fix this issue? Thanks!

setting autoplay: false doesn't prevent video from playing as soon as loaded,

May I suggest this logic and the addition of a $.fn.supportsAutoPlay function?

This is an example of detecting autoPlay, not sure how foolproof it is?
fairly psuedo-code not tested... sorry~

               $.fn.videoBG.supportsAutoPlay = function() {
                   var AUTOPLAY = false;
                try 
                {
                    var video = new Video();
                    video.autoplay = true;
                    video.volume = 0;

                    // this will only be triggered if autoplay works
                    $(video).on('play', function() {
                        AUTOPLAY = true;
                    });
                } 
                catch(e) 
                {
                    return false
                }

                return AUTOPLAY
            });
}

I don't think the issue is with the plugin, but I've posted this issue with the theme authors and Stack overflow. Nothing, on either front. So, I'm hoping maybe you know something, because this is driving me nuts.

What I wrote on Stack:
I've already posted this on the theme's author support page. I haven't gotten an answer yet.

Video plugin: jQuery.videoBG
theme: Mercurial http://themeforest.net/item/mercurial-one-page-parallax-wordpress-theme/3505513
site: http://wearehmc.com/wordpress/

Right now, the site is set up with video as a background. I have figured that it’s not the plugin, but the theme because it works on the current site with a fixed navigation.

So, as I said the navigation header “unstickies” it’s self in Chrome, Safari, and Opera (there’s also some weird behavior too). I haven’t even tried IE … But really I’m not worried about IE, yet. There’s no weird CSS changes, or Javascript errors.

Now it might have something to do with it calling different videos for the different browsers, but as I said before, the static site that we have up at the moment works fine, and if I remember correctly Firefox and Safari support the same video format.

Oh, and when the navigation header is set to absolute there’s no weird behavior.

I'm trying to figure out if this is a html5 video bug, or a theme bug.

I want to fire an event when the video is over.

Thanks.

Is it possible to add a Callback function in this library. A callback on "oncanplaythrough" event.
Thank you.

This isn't working in firefox. works in IE and chrome, but not in firefox. my link is here -
http://digitalmarketingcardiff.com/blackmambavideo/

can someone help please?

thanks.