Although HTML5 video is supported in IE 9, it appears your script displays the static image. Was this an oversight, or is there a way to also support IE9+?

hi, after download your code and upload it on my sever to test it, i find that it would not play at all. i check it on firefox, and on chrome only a small movie window play on the left top. would you show me what need to be done so that the code could work?

http://vietthietkeweb.net/1111/

Thanks in advanced

I can't seem to play a video on an iOS device.

Hi George,

I've test the video background on the iPad (2nd Gen) and the Safari browser for the PC, but it only shows the poster image. I used the iPad's Chrome and Safari Browser. Any ideas? Works on the desktop PC's though, Firefox, IE9, and Chrome.

I tried your demo page and sure enough, it was the poster image.

Thanks in advance for your help.

Hello George,

I'm using ascensor.js for a website, and i'm using your script for my video on each section.
So when a user is on the section first for exemple, he launch the first video by item " play button " then on the end of the video, he's directly redirected on the next section.
So here's my code at the moment :

        $(document).ready(function() {
            $('#bg2').prepend('<div class="video-background"></div>');
            $('.video-background').videobackground({
                videoSource: [['video/goback.mp4', 'video/mp4'],
                    ['video/goback.webm', 'video/webm']], 
                autoplay: true,
                loop: false,
                controlPosition: '#bg2',
                loadedCallback: function() {
                $(this).videobackground('mute');
                },
                loadedCallback: function() {
                    this.find('video').on('ended', function () {
                        window.location.href = 'index.html#/choose1';
                        });
                        }
            });
        });

I would like to, when the video is finished, we are on the next section, but the video is also playing when we are on the right section. Is it possible instead to click always on the play buttom ?!

Thanks in advance,

Hi, this is working beautifully — thank you!

Trying to degrade gracefully on iPhones & iPads, how would you recommend I turn off video background?

Here's my prototype:
http://bit.ly/UuKZ4u

Thanks!

I love the speed and versatility of this code. It works in almost every browser I throw it at. Thanks for programming it.

One issue I’ve noticed is that on an iPhone, none of the internal href links within either your page

http://www.georgepaterson.com/sandbox/jquery-html5-video-background-demo/

or mine

www.andrewdavidjohnson.com

None of the links on your page can be clicked on on an iPhone. I don’t think this is a wordpress thing as other wordpress sites allow ‘touchable’ links. Is it something to do with jquery incompatibility with iOS?

Hi George, great work! Thank you!

I've a problem:

i can't get mozilla webm working on the WWW or local http server, but works if i launch directly the page with firefox from my hard disk.

any idea?

thank you,
bye!

Your Plugin is great, but there is a Problem with firefox 5. No Idea why.
And you should disable fullscreen background video on Iphone (because the other links become somehow unclickable)

Greets

Leonid

I would love a method to trigger something each time the video plays when on a loop. Essentially I'd like to build out a counter from that being triggered each time.

When I load the page in Chrome I first see the background image and then it disappears and the background is blank. If you click anywhere on the page the video shows up and everything works fine. I don't get this issue with any other browser but Chrome, not sure what's going on here.

Edit: I found the solution, I was missing the div for the controls.

Hi George,

I have been fiddling around with your plugin and I much appreciate that you made it open source.

I'm trying to keep the video centered when the width changes but the height doesn't.
I'm currently adding a negative left margin to the video tag using the following code:

function resize(that) {
var documentHeight = $(document).height(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
if (that.settings.resizeTo === 'window') {
$(that).css('height', windowHeight);
// My code
var videoBoxWidth = that.find('video').width(), difference, alignmentCorrection;
if ( videoBoxWidth > windowWidth) {
difference = videoBoxWidth - windowWidth;
alignmentCorrection = difference/2;
$(that).find('video').css("margin-left", "-"+alignmentCorrection+"px");
}
//End of my code
} else {
if (windowHeight >= documentHeight) {
$(that).css('height', windowHeight);
} else {
$(that).css('height', documentHeight);
}
}
}

As you can see I just appended my code to the resize function, however it doesn't trigger when the page first loads.
I'm considering to add it to the loadedCallback to trigger the align before the resize kicks in, then if the window resizes the resize function will take care of it.

What do you think?

Regards,

Eduardo Kranz

Hi,

Is there an option to fall back on SWF? I like this plugin a lot, but i'd like to give Iexplorer 7 and 8 users (still a large part of my visitors) also the option to view the video.

Thank you in advance.

I have the code below to full a video in the top container. It works fine in Safari, Chrome and FF but I can't get it to work in IE9. Any ideas?

URL: http://impactpartner.com

Additionally, this site is built in Wordpress which is why there is jQuery instead of $.

jQuery(document).ready(function() {

            <!-- Panel 1 -->
            jQuery('#home').prepend('<div class="video-background"></div>');
            jQuery('.video-background').videobackground({
                videoSource: [['http://impactpartner.com/wp-content/themes/impact-4.0/video/intro_video.mp4', 'video/mp4'],
                    ['http://impactpartner.com/wp-content/themes/impact-4.0/video/intro_video.webm', 'video/webm'], 
                    ['http://impactpartner.com/wp-content/themes/impact-4.0/video/intro_video.ogv', 'video/ogg']], 
                controlPosition: '#main',
                loop: 'true',
                resizeTo: 'window',
                poster: 'http://impactpartner.com/wp-content/themes/impact-4.0/img/home/background/radiobg.jpg',
                loadedCallback: function() {
                    jQuery(this).videobackground('mute');
                }
            });
        });

I enabled the loop function but when the video plays back the second time, the audio mutes, which is ok, I don't mind that. But when the video loops for the third time the audio switches back on. and it continues to switch on and off each loop cycle.

Anyone know how to fix that?

Thanks!

Hi! I have tested videos on Firefox and Chrome and both browsers loop. On IE9 it does not. Goes to a faded white background. Any ideas?

how can i hide the video controller? (play, pause, volume)

Hi,
thanks for the great plugin.
I have two questions:

• I have problems with playing the video in IE and FF. If I try to run it locally it works, but if I try to www in FF is only the cover. It's caused by the configuration of the file httpd.config?
• I activated the loop, but I would like to find a solution to make that at the end of a video it starts a new one. is it possible?

thanks
Have a nice day

I'm sorry, maybe it's a noob question, but I'm a noob.
Anyway, I'm having some issues using your code with video 1920x1080 on a screen 1400x900.
Basically, both in Firefox and Chrome the video is not resizing to fit the screen. It stay 1920x1080 so I can see only a portion of it.
Trying with a video half size it works, but since I'm a filmmaker and I wanna keep the video on a FullHD resolution, expecialy for screens with hi-def, I would like to solve the problem without changing resolution of the video.
Any suggestions? What's the problems? Is it a bug? Or...!?

O.K.
I am on windows 8 And using IE 10.0.9200.16580 and the script does not work. But will work with chrome and fire fox I have tried two other computers and same thing only IE 10 so I tried your demo site and your demo will not work for me.
But it did work In IE I think my windows took a update and that's when it broke.

Could you check for me with your computer I remember asking you something like this before but for chrome and the next chrome update fixed it.

But IE does not update like chrome or firefox does I know Windows 8.1 will have IE 11 but can not get IE 11 till june 26 to test

Hi George,
We are looking into the possibility of creating a random or real-time loop of videos using a full-screen video background on an HTML site.
By 'random loop of videos' I mean that each user would find themselves at different stages of a video each time they log in.
By 'real-time loop of videos' I mean that the videos might be linked to play in real-time similar to movies at a cinema.
Can this be done within your plug-in?
All the best,
Angela

iOS 6 has some new offerings for front end developers - does anyone know if it will bring support for playing video in the background of a page?

He George,

I wanna to use your code for a project, so far it works but have a few problems or maybe bugs.

(Tested on a mac)

• The video doesn't show up at all in firefox, your test files works fine.
• The resize function doesn't same to regonize my video, with yes or true or what so ever.

Hope you can help me with this. Thank you already for your time.

example url: http://mucc.nl/clients/rietveld/index.php/

This is the code i use (ignore {site_url}, and the video is your bunny video but i renamed them as test (ogg en webm):

<script>
        $(document).ready(function() {

            $('body').prepend('<div class="video-background"></div>');
            $('.video-background').videobackground({
                videoSource: [
                    '{site_url}ontwerp/scripts/assets/rietveld1.mp4', 
                    '{site_url}ontwerp/scripts/assets/rietveld1.webm', 
                    '{site_url}ontwerp/scripts/assets/rietveld1.ogv'], 
                controlPosition: '#main',
                loop: 'yes',
                resize: 'yes',
                loadedCallback: function() {
                    $(this).videobackground('mute', {controlPosition: '#main'});
                }
            });
        });
    </script>

CSS:
.video-background{
z-index: -999;
position: absolute;
width: 100%;
height: 100%
min-height: 100%
background: #b3b3b5;
}

Is there a way to check for when the video has stopped playing to then initiate a function?

Tell me please, how to add an array of more than one file format mp4 for example.
Thank you.

Hi George!

Thanks for the great template! It works well on all browsers except for Safari, where the video show up really small in the left top corner for some reason. I noticed that someone mentioned this issue earlier and that it had something to do with calling for the wrong file extension, but that it was fixed. Any idea why it doesn't work in Safari again? I would really appreciate your help!!
Thanks so much for making this open source!!

The bottom of the screen has a white line, when I resize the screen it changes to normal, do you have an idea ?

Hi George,

Fantastic plugin! Works great in Firefox and Chrome. It's not working in Safari Version 5.1 (6534.50) though. Any ideas why not?

Thanks

Hi! I'm André, a core member of bower. Can you please make the v1.3 a valid semver tag? (v.1.3.0). Thanks.

I don't know if it's solvable here.

I'm making a page using this plugin. In the page, a text is changed using intervals. In firefox it works great. But in webkit browsers, when the dom is changed the content is not refreshed.

Hi,

Thank you for you plugin.

My video is not playing in the safari browser. It works locally on my safari browser. Is it something to do with my server settings? Could you please advise me how to fix this. http://www.flatness.eu/gil-leung-video.html

Thanks.

The video is not being added at all in safari

right now the video only loops a certain number of times. how can i make it loop infinitely?

My problem is related to the loop. In the. Js is true and the script.
But it does not work, please show me an example.

Many Thanks, Greetings

$(document).ready(function() {
$('dl').toggle();
$('h2').bind('click', function(event) {
event.preventDefault();
$(this).next('dl').slideToggle(500, function() {
$('.video-background').videobackground('resize');
});
});
$('body').prepend('

                }
            });
        });

Hi George

Thanks for this!

I'd rather have the background adapt seamlessly to the window height. If you have a page with a lot of scrollable text (which is the normal case nowadays), you will expect the background to stay fixed and be able to scroll the stuff in front of that. Cf. your own demo page.

I have made the following changes:
.video-background {
position: fixed;
}

function resize (element) {
var documentHeight = $(document).height(),
windowHeight = $(window).height();
//if (windowHeight >= documentHeight) {
$(element).css('height', windowHeight);
//}
//else if (documentHeight > windowHeight) {
// $(element).css('height', documentHeight);
// }
}

... maybe this could be included as an option "resizeTo" (window, document)?

Best regards
Urs

Hey George,

I noticed that the plugin doesn't add type attributes to the >source< tags. This causes browsers to download partial to full copies of the unneeded videos, in attempt to determine the mime type. I tested this in Firefox using the Firebug net panel.

I made a slight modification to the code, in order to utilize the passing of type. I suppose you could make this an optional format somehow, but based on the results, I would recommend requiring the video type be explicitly passed in the constructor. It will definitely cut down on requests for Firefox users, and probably all browsers.

Around line 39 of the JS.

$.each(element.settings.videoSource, function(index, value) { 
                      compiledSource = compiledSource + '<source src="' + value[0] + '" type="' + value[1] + '">';

The constructor:

videoSource: [['http://onecommunity.prod2.connectinsivia.com/wp-content/themes/onecommunity/_/vid/OneCommunity-Home-1.mp4', 'video/mp4'], ['http://onecommunity.prod2.connectinsivia.com/wp-content/themes/onecommunity/_/vid/OneCommunity-Home-1.webm', 'video/webm'], ['http://onecommunity.prod2.connectinsivia.com/wp-content/themes/onecommunity/_/vid/OneCommunity-Home-1.ogv', 'video/ogg']],

We are having a problem in Chrome only where the video does not loop and goes to black. We have the parameter set to true in both the videobackground.js and in the function on the page. We see the same action on all pages on our site even with different videos. Any ideas what might be causing this?

You can see it in action here:
http://reinhardt.jomc.unc.edu/
(video bg is about 30 seconds)

$('.video-background').videobackground({
videoSource: ['http://reinhardt.jomc.unc.edu/media/uploads/background-video/h264/fishes_noaudio_-_Computer.m4v',
'http://reinhardt.jomc.unc.edu/media/uploads/background-video/ogg/fishes_noaudio.ogv'],
controlPosition: '.video-background',
poster: 'http://reinhardt.jomc.unc.edu/media/uploads/background-video/jpg/fish_bg.jpg',
loop: 'true',
resize: 'true',
loadedCallback: function() {
$(this).videobackground('mute', {controlPosition: '.video-background'});
}
});

BTW... thanks for providing the code for this. It works well and we are thankful!

Thanks,
Steven

jquery-videobackground has stopped working on chrome 23. it also does not work on your demo page with chrome version 23

Hi,
The video background works perfect in firefox and even internet explorer.
But it does not work for me in chrome.

the video plays for a few seconds and the background becomes white.

I have it uploaded to test at www.test.kungfucasting.com

thank you very much for the help.

kind regards,

raies

I downloaded and unzip the zip. I did not change anything.With firefox, As I open it locally: it works. But when I put the files on the server, the video does not work. But for safari work.

If you want tchek that:
http://zeckart.com/testvideo1/

sorry for my bad english

In both Ipad and Ipod touch devices, the video doesn't play (that's ok), but when it falls back, the background doesn't properly stretch and you end up with a black bar to the left. In Ipod, I also had Z-Index issues in conjunction with this.

Test on:
IPad v1
IPod touch v4 (pretty sure)

I used detectmobilebrowsers.com to avoid the ipod / phone issues, but IPad isn't considered mobile by most detection scripts, so that one is still off.

Hi George,

Thank you for taking the time to develop and support this plug-in.

I am trying to use your plug-in to play two videos in a div one at the top of my page and one at the bottom.

But it does not seem to want to play the the footer video? Any Ideas.

Thanks

Huet

            <!-- Header video -->
            $('#graveyard').prepend('<div class="video-background"></div>');
            $('.video-background').videobackground({
                videoSource: [
                    ['../assets/hauntedgraveyard.mp4', 'video/mp4'],
                    ['../assets/hauntedgraveyard.webm', 'video/webm'],
                    ['../assets/hauntedgraveyard.ogv', 'video/ogg']
                ],
                resize: false,
                loop: true,
                poster: '../assets/hauntedgraveyard.jpg',
                /*                  resizeTo:'window', */
                loadedCallback: function () {
                    $(this).videobackground('mute');
                }
            });
            <!-- Footer video -->
            $('#whitesmoke').prepend('<div class="video-background1"></div>');
            $('.video-background1').videobackground({
                videoSource: [
                    ['../../assets/whitesmoke/whitesmoke.mp4', 'video/mp4'],
                    ['../assets/whitesmoke/whitesmoke.webm', 'video/webm'],
                    ['../assets/whitesmoke/hauntedgraveyard.ogv', 'video/ogg']
                ],
                resize: false,
                loop: true,
                poster: '../assets/whitesmoke/whitesmoke.jpg',
                preload: true,
                loadedCallback: function () {
                    $(this).videobackground('mute');
                }
            });
        });

Hi there,

I'm simply trying to have a fullscreen video that fits the browser window and automatically plays when the page loads, so this plug-in has been great for that and I'm really appreciative. However, I can't understand why I can't get it to function in Firefox and I'm hoping someone can point out an obvious reason as to why it isn't working.

Webpage is: http://palmsofpalms.com/

Also, a secondary problem is a little jump as it loads on other browsers. Is that due to a problem with my poster image? Is 25mb too large for the video file?

Thanks a lot

Sam

Hi sorry for taking another look but I still can not find the problem and solution in js is true and the script. But that is not the problem. many Thanks

$(document).ready(function() {
$('dl').toggle();
$('h2').bind('click', function(event) {
event.preventDefault();
$(this).next('dl').slideToggle(500, function() {
$('.video-background').videobackground('resize');
});
});
$('body').prepend('

                videoSource: [['video/big-buck-bunny.mp4', 'video/mp4'],
                    ['video/big-buck-bunny.webm', 'video/webm'], 
                    ['video/big-buck-bunny.ogv', 'video/ogg']], 



                controlPosition: '#main',
                poster: 'video/big-buck-bunny.jpg',
            loop:'true',
                loadedCallback: function() {
                $(this).videobackground('mute');
                            }

            });

Hi there, great plugin you've made!!
I'd only like to destroy the video after it's finished or after some time if not possible. I tried sleep(5); and setTimeout("$(this).videobackground('destroy')",5000); in the loaded callback, but nothing happens. Can you spare some hints?:)

Hello,

can you please tell me where i can enable the loop function for the Video. I just readed on your Webside, that it is set default on FALSE. But where and how to enable?

Thanks.
emitremmus

Hi George,

First up, great plugin! Thanks very much for all the hard work that has no doubt gone into it.

I'm having issues with the poster image not resizing to fit the viewport in IE7 and 8, I've noticed the same in your demo. Is there a workaround or fix for it?

Thanks in advance.
Neil

Dear George, this plug is amazing and very easy to implement – even for me as a non jquery developer. So thank you very much for your work on this George, it helped me a lot, really.

But I think there is a bug:

On my iphone 3GS with iOS 4, while testing your demo site http://georgepaterson.github.com/jquery-videobackground/, everything looks ok: the poster image is displayed, because this device doesn't support the HTML5 video background. But while I can see the contents of the page floating over the poster image correctly, I'm not able to click on any of the links. As if there is an invisible layer between the page and my finger, that stops me from clicking on anything.

Do you know what could cause this behaviour? Is there a fix for that?

Thank you very much and best regards,

Tom

hi, I'm sorry for my english ... but I have a problem with the plugin and I hope you can help me.
I do not know if I can write in this space to communicate my problem.
I would like to use your plugin for my site and do tests. this is the link test: http://www.gabrielepici.com/jquery-videobackground-master/jquery-videobackground-master/index.html
I renamed my video with the same name as your example (big-buck-bunny). With explorer and chrome I see my new video but with firefox i still see the video big-buck-bunny. why?
What's wrong?
I hope you can help me and I congratulate you for this great plugin

My client is wanting to have two different BG videos. One for the main website and one for a specific page within the site. When you click on the link to that single page, the first video would disappear and the other would take its place.

What would be the easiest way to accomplish this?