Sridhar Katakam

Genesis and WordPress Tutorials

Video background section in Dynamik

by 9 Comments

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:

dynamik-video-section

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:

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

Already a member? Log in below or here.

  • Thanks Sridhar! I did everything as instructed, except for the Conditionals and Widget Area which I adjusted to follow the way my fluid widgetized homepage is built.

    My changes were the following:
    The conditional, instead of being ( is_front_page (), now it is ( is_page_template(‘my-templates/fluid-page.php’)
    The widget, instead of being “#home_featured”, now it is “#first”

    I believe i made the proper changes on the CSS, Functions, and BigVideo-init.js, but I still can’t see the video, though I can see the fallback image.

    You can see the current test status here – http://nomadpursuits.com

    Any help is appreciated. Cheers!

    Reply

      • Thanks! At the moment the video is showing fine. On mobile, though, instead of showing the fallback image, it is showing a play button for the video.

        At the moment I have this @media CSS:
        #first {
        position: relative;
        background-attachment: scroll;
        background-repeat: no-repeat;
        }

        Would there be any additional CSS to just show the fallback image and not the video play button?

        Lastly, on the desktop view of the video, is it possible to make it “fixed” so when you scroll the video stays in place while everything moves up/down? I tried using “position: fixed;” but that didn’t work.

        Cheers!
        Norbert

        Reply

        • Would there be any additional CSS to just show the fallback image and not the video play button?

          I see both the fallback image and play button in iPhone. I am not sure why the play button is appearing. Can you implement the above tutorial in a fresh install of Genesis+Dynamik and tell me whether the issue is present?

          Lastly, on the desktop view of the video, is it possible to make it “fixed” so when you scroll the video stays in place while everything moves up/down?

          Not that I know of.

          Reply

          • Hmmm, not sure exactly why, but now the play button doesn’t show on mobile. The only thing I’ve changed since last time is that I removed “position: relative” from the @media. Let’s see if that was the issue.

            On the fixed background video… I’m guessing it’s possible, but not sure how they did it on this site. http://theblondeabroad.com/

  • Alright, just realized that it is still showing the video button on mobile. Not sure why. Will try to do it on a fresh install.

    Reply

  • Sridhar,

    do you have an updated link for video.js,? The one here is dead, and there are so many different versions floating around on the internet.

    Thanks in advance.

    Reply
    • >