Sridhar Katakam

Genesis and WordPress Tutorials

Video background in Genesis using jQuery

by 28 Comments

In this article I share my findings in implementing Victa's Background video jQuery plugin in Genesis Sample theme (should work in other Genesis themes as well with minor changes).

Screenshots:

video-background-genesis

full-view-background-video-genesis

Videos are in the post below.

Step 1

Download the jQuery plugin's zip file from here.

Step 2

Extract the contents and upload jquery.backgroundvideo.min.js to child theme directory/js.

Step 3

Create a file named jquery.backgroundvideo.init.js having the following code and upload it to the same location.

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar

    Had a play with this today on a new domain – looks great. Thank you very much for your efforts here, much appreciated.

    http://thresholdrecruitment.co.uk/

    The only issue I had is with the mobile version, which is likely affected by the logo image I used, instead of the text you have in your version.

    What do you think? Any advice?

    Best

    Matt

    Reply

  • I love it! This is exactly what I needed. The site is still in progress but this is a great start.

    A few questions…

    Why would it change the look of my typekit fonts? Their edges are jagged now.
    Any recommendations for speeding up the initial load time?
    Can I get rid of the sound or do I need to edit the video?
    Can I make it user-controlled so it stops (or plays) on command?

    Thanks!

    Reply

  • Is there a way to make the visible are of the video exactly fit the screen? So the down arrow will sit just above the fold no matter what.

    Thanks again!

    Reply

  • Have you tried this plugin? http://wordpress.org/plugins/wpmbytplayer/
    Very easy to use with YouTube & Vimeo and you can also display a full width video with controls inside a section, not just as a background.

    Also this jquery http://dfcb.github.io/BigVideo.js/ is the most responsive of all full screen or full width section apps I’ve seen and tested but I can’t figure out how to use it with YouTube… As is it only works with HTML5 self-hosted or with premium account Vimeo.

    I’ll be interested to see your opinion on either one compared to this HTML5-Background-Video jquery.

    Reply

      • It worked perfectly with Centric Pro. I’ve only just begun learning jQuery and haven’t had a chance to play around with it much, but it works. 🙂

        Reply

  • Another cool thing to try. 1 question. When we add different jquery plugins should they all be a separate file that we have to enqueue separately in functions or can we keep adding them to 1 file like “scripts.js”?

    Reply

  • Hey Sridhar,

    Thanks for the awesome tutorial! I’m having a bit of a problem getting the video to be stretched vertically to cover the entire viewport when smaller than 1000px wide. Not sure what this is, despite using part two of the code.

    http://procon.staging.wpengine.com/

    Any idea of tricks to use to make that happen? I don’t care if the video width is cut off, if that means the viewport is covered.

    Thanks,
    Alexandra

    Reply

  • Thank you for such a clear and concise tutorial! I’ve been playing with it for the last hour or so and it’s worked great

    Reply

  • Hi Sridhar,

    I am trying to use this in my altitude-pro genesis theme but it looks like the genesis_after_header is not the same section for my theme as it is not displaying at all and even adds a below the menu section that wasnt there

    I can’t seem to figure it out myself if you could help would be awesome. Here is the link:

    https://ganacontrol.com/

    Reply

  • Hi, Love your tutorials! Looking to put the video in Parallax Pro, Studiopress. I want to use it as a background in one of the home page widgets. Any tips? Thanks!!!

    Reply

  • hay sridhar, thanks for this terriric tutorial, it worked perfectly in dynamik.

    in step 5, you mention that the video will play on “non handheld devices i.e, not on mobiles and tablets.”
    curious to know why that is, and how to allow the video to automatically play on handheld devices.

    Reply

  • Holy smokes, Sridhar, you did it again!

    The high quality of your tutorial allowed me to easily adapt it to my project. The result is stunning! I’m so happy I joined your community. Best. Investment. Ever!

    (and you can quote me on that)

    Thanks!

    Reply
    • >