I'm simply trying to have a fullscreen video that fits the browser window and automatically plays when the page loads. To do this I used https://github.com/georgepaterson/jquery-videobackground which is great. 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
If you view your page in FireFox using Firebug's console, you see the following:
Specified "type" attribute of "video/mp4" is not supported. Load of media resource video/palms2.mp4 failed.
HTTP "Content-Type" of "text/plain" is not supported. Load of media resource http://palmsofpalms.com/video/palms2.webm failed.
HTTP "Content-Type" of "text/plain" is not supported. Load of media resource http://palmsofpalms.com/video/palms2.ogv failed.
All candidate resources failed to load. Media load paused.
Check this out for a quick tut on how to use the console.
You'll need to install FireBug for it to work in Firefox.
What this translates to, is that FF tried to play "palms2.mp4", but couldn't, as it doesn't support mp4.
It then tried to play 'palms2.webm' and 'palms2.ogv', but couldn't, as the file is being sent as text/plain by the server.
To get this to work, you need to configure the server to send the file with a supported MIME type.
Try creating a ".htaccess" file and adding the following lines to it:
#Register MIME types
AddType video/x-m4v .m4v
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Then upload the ".htaccess" file to the root of your site.
Tip: Windows won't let file names start with a dot, so if you are on this platform you will have to create a file called htaccess.txt, add the code above, upload the file, then rename it to ".htaccess" on the server.
Hope that helps, here's some further reading: