In this tutorial I show how BigVideo.js, a jQuery plugin that uses Video.js for background video can be set up in WordPress.
In handhelds devices like tablets and mobiles, a poster image (screenshot of one of the video frames, usually the first one) is going to be set to appear in place of the video background.
Step 1
Convert your desired body background mp4 video to ogv and webm formats using a software like the free Miro Video Converter.
Upload these 3 files to a directory named say, vids under your site's root directory.
Step 2
Create a static image of this video to be set as the body background. Miro has a 'Create Thumbnails' setting that can be used to generate this image. Upload this image to your child theme's images directory.
Step 3
Upload these files to child theme's js (create, if not existing) directory:
I am trying this on http://disrupt2create.com/adam ..it works great on chrome, but doesn’t show on safari at all, and on firefox, the video is a jumbled pixeled black and green mess. Any suggestions or points to start?
Looks ok to me in Firefox and Safari here. I can see the video playing in the background.
Can you test in another computer?