WP SITES

Log in

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

—

by

Brad Dalton

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

Comments

19 responses to “Replace Image With Video Background in Aspire Pro Front Page Widget 1”

  1. LianaG Avatar
    LianaG

    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

    1. Brad Dalton Avatar
      Brad Dalton

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

      or

      Set a min-height of 1050px.

      1. LianaG Avatar
        LianaG

        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

        1. Brad Dalton Avatar
          Brad Dalton

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

          1. LianaG Avatar
            LianaG

            Hi Brad,

            Did you happen to come up with a solution?

            🙂
            Liana

          2. Brad Dalton Avatar
            Brad Dalton

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

          3. Brad Dalton Avatar
            Brad Dalton

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

  2. LianaG Avatar
    LianaG

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

    1. Brad Dalton Avatar
      Brad Dalton

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

  3. tsagent Avatar
    tsagent

    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

    1. tsagent Avatar
      tsagent

      PS: Any tip on centering the video as well?

      1. Brad Dalton Avatar
        Brad Dalton

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

    2. Brad Dalton Avatar
      Brad Dalton

      Not hidden on smaller screens.

  4. bluefox42 Avatar
    bluefox42

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Don’t see what?

      1. bluefox42 Avatar
        bluefox42

        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.

        1. Brad Dalton Avatar
          Brad Dalton

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

  5. panoptic Avatar
    panoptic

    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.

    1. Brad Dalton Avatar
      Brad Dalton

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

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.