In the comments section of How to replace Home Section 1’s Parallax Image Background with Video Background using BigVideo.js, Andrew writes,
Hi Sridhar , I’ve managed to adapt this tutorial to work with Dynamik for Genesis , I changed the enque’s code , created directories in Dynamik Uploads folder for the JS and Video files and changed the target class in the init file …..etc etc and it works for me ….
But …. how do I implement the alternate image for mobiles ? In Dynamik I’m using a hook box to place the video , I have no background image specified as in parralax pro tutorial.
How would we place a title and some caption text over the video? ( similar to the video tutorial for genesis).
Would be great if you could offer some help with this , even a tutorial for dynamik users to place this video anywhere using a hook box or custom widget area ?
In this tutorial I share the steps for using BigVideo.js to display a video as background for a custom 'Home Featured' widget area below the header on the front page in Dynamik.
On touchscreen devices, background image will appear in place of the video.
Screenshot:
Screencast:
Step 1
Convert your desired Home Featured section's background mp4 video to ogv and webm formats using a software like the free Miro Video Converter. Upload these 3 files to videos folder under your site's root directory.
Create a static image of this video. Miro has a 'Create Thumbnails' setting that can be used to generate this image. Go to Genesis > Dynamik Design > Images and upload this image.
Step 2
Upload these files to wp-content/uploads/dynamik-gen/theme directory:
