• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Replace Image With Video Background in Aspire Pro Front Page Widget 1

This solution shows you how to replace the background image behind the front page 1 widget area of the Aspire Pro theme.

Update: Try this solution 1st as it’s generally better and easier to install.

Untitled

Demo Video

The instructions in this tutorial shows you how to:

  1. Remove the upload field for the background image from the customizer
  2. Add code to the front-page.php file which includes the URL to your video
  3. Use CSS for Media Queries to adjust the position of your front page 2 widget area on smaller screens and devices

inspire-pro-video-background

Sign up or Login to access the full solution:

Register for full access

Related Tutorials

  • Add Full Width Video To Widget Area In Genesis Child Themes

Aspire Pro Theme Video

Reader Interactions

Comments

  1. LianaG says

    September 24, 2016 at 2:25 pm

    The default images in the theme are 1600 pixels wide and 1050 pixels tall.

    How do I make the video the height 1050 – the frontpage widget 2 – the join my email list is creeping up on the video?

    Thanks

    Log in to Reply
    • Brad Dalton says

      September 25, 2016 at 12:48 am

      You could replace the video with the image at a specific screen width

      or

      Set a min-height of 1050px.

      Log in to Reply
      • LianaG says

        September 26, 2016 at 10:02 pm

        Hi Brad,

        Do you have a specific suggestion for the code I would need to add?

        And do I need to add it to the style.css

        Log in to Reply
        • Brad Dalton says

          September 27, 2016 at 10:43 am

          Good question. Leave it with me and i’ll see what i can come up with.

          Log in to Reply
          • LianaG says

            October 4, 2016 at 10:48 pm

            Hi Brad,

            Did you happen to come up with a solution?

            🙂
            Liana

          • Brad Dalton says

            October 5, 2016 at 1:11 am

            I’ve got a new solution coming next week which i think is better.

          • Brad Dalton says

            October 19, 2016 at 9:28 am

            Sorry for the delay. This solution is 100% mobile responsive

  2. LianaG says

    September 24, 2016 at 2:13 pm

    Brad, Thank you – that was brilliant – any recommendations on the quality resolution and size of the video?

    Log in to Reply
    • Brad Dalton says

      September 25, 2016 at 12:46 am

      I would use width and height 100% in HD quality.

      Log in to Reply
  3. tsagent says

    May 12, 2016 at 2:01 pm

    This is really great, I’m using it for a motocycle club…the only thing I’m seeing is the video is hidden on smaller screens…any suggestions? We’re hoping to do alot more riding videos so this is a nice solution for the homepage

    http://seacoastmotonight.com/

    thanks and best
    -t

    Log in to Reply
    • tsagent says

      May 12, 2016 at 2:05 pm

      PS: Any tip on centering the video as well?

      Log in to Reply
      • Brad Dalton says

        May 12, 2016 at 8:08 pm

        Add text-align: center; or background-position: center; to the video-background class in the CSS rule.

        Log in to Reply
    • Brad Dalton says

      May 12, 2016 at 7:55 pm

      Not hidden on smaller screens.

      Log in to Reply
  4. bluefox42 says

    April 26, 2016 at 8:53 am

    Strange, I’m a Pro Plus member (paid $300 on Jan 2015) and I don’t see it. I guess they cut you off from new themes? I dunno.

    Log in to Reply
    • Brad Dalton says

      April 26, 2016 at 1:26 pm

      Don’t see what?

      Log in to Reply
      • bluefox42 says

        April 30, 2016 at 3:57 pm

        I pretty sure I’m a Pro Plus member and the theme is not in my list of Downloads. Don’t sweat it man. You have bigger fish to fry.

        Log in to Reply
        • Brad Dalton says

          April 30, 2016 at 4:48 pm

          Sorry, my bad. Its Aspire Pro not Inspire Pro.

          Log in to Reply
  5. panoptic says

    March 14, 2016 at 8:36 pm

    Where do I get the Inspire Pro theme? Is Inspire Pro the same theme as the Aspire Pro Theme? I can not find Inspire Pro on the studiopress.com website.

    Log in to Reply
    • Brad Dalton says

      March 14, 2016 at 9:14 pm

      You can download it from the downloads page if you are a Pro Plus member.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.