Sridhar Katakam

Genesis and WordPress Tutorials

Video Background Hero Section with Vimeo Video Pop Up on Click in Genesis

by 12 Comments

In this article I provide details of displaying a ambient video as a background in a hero section on front page with a widget overlay in Genesis. Clicking on play button inside the widget will open a Vimeo video nearly full screen. When the user clicks anywhere around the video, it will pause and fade away. Clicking the play button again will bring up the large pop up with the video resuming from where it was left off.

Live Demo

video-background-hero-vimeo-pop-up

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Upload your video files to be used as the background for hero section in mp4, ogv and webm formats to videos directory under your site's root.

Step 2

Create a js directory in your child theme (if it's not already present) and upload the following:

a) video.min.js

b) bigvideo.js

c) bigvideo-init.js:

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

Already a member? Log in below or here.

  • Another reason why I’m glad I signed up as a member! Very Cool!

    Any way to skip having the “Vimeo” video link added?

    I’m using Agency Pro and I’d love to add this video background to my site without having a vimeo link or vimeo pop-up.

    Reply

  • Hi Sridhar

    Great tutorial as always. Is there a way to make the Home Hero widget area (and so the video) fit the screen – width and height – as in themes like Cafe Pro? I tried to use the home.js from the Cafe Pro theme and make some modifications. It kind-of worked, but I couldn’t get the calculation for the height to work (not good in javascript).

    Thanks
    Dom

    Reply

  • Hey,
    Great sample code you put together. I wanted to show you the error I am getting.

    Uncaught TypeError: Cannot read property ‘getAttribute’ of undefined

    For some reason this is breaking my collapsing menu.

    If I comment this out in the handhelds.js file then the menu works.
    var iframe = $(‘#pPlayer’)[0];
    var player = $f(iframe);
    player.addEvent(‘ready’, function() {});

    But if I comment this out the video does not work right. Any idea what I am doing wrong?

    Reply

  • Hi again Sridhar

    Is it possible to serve the video from Amazon Cloudfront, do you know? I want to add reasonably big video files for this and was wondering if this would be a more efficient way of delivering the video.

    Thanks
    Dom

    Reply

  • Hi Sridhar

    Thanks for your help with this (you’ve given me a couple of pointers as I’ve gone along implementing this tutorial). One issue I am having is that, occasionally, as the page with the video is loading, the video controls appear (a number of empty dropdown boxes). It’s not something I can recreate all the time, but I have noticed it (and so has the client) on a couple of visits. Is this something you’ve noticed? Do you have any suggestions?

    Thanks
    Dom

    Reply

  • OK I am back. It seems like this method does not work in chrome anymore.

    Here is a sample:
    https://amarillooralsurgery.com/

    Any idea what the solve this for this? It seems like this method may have gotten caught in the crosshair with googles no auto play with sound update.

    Reply

  • Hi Sridhar, firstly this is exactly what I was after and with a bit of customisation it’s spot on !!! Thank you so much.

    One thing if you would be so kind, the close out on the video is a little tempremental in that it will only close out if you click either side of the video. The continer seems to be blocking a close out above and below so I was wondering if you had any solution or could point us in the right direction of adding a “close X” or similar?

    Anyways….

    Thanks again, I love following your odds and ends as they always inspire me when I’m stuck for think juice on a project ! 🙂

    Gav

    Reply
    • >