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.
Demo Video
The instructions in this tutorial shows you how to:
- Remove the upload field for the background image from the customizer
- Add code to the front-page.php file which includes the URL to your video
- Use CSS for Media Queries to adjust the position of your front page 2 widget area on smaller screens and devices
Sign up or Login to access the full solution:
19 replies on “Replace Image With Video Background in Aspire Pro Front Page Widget 1”
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
You could replace the video with the image at a specific screen width
or
Set a min-height of 1050px.
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
Good question. Leave it with me and i’ll see what i can come up with.
Hi Brad,
Did you happen to come up with a solution?
🙂
Liana
I’ve got a new solution coming next week which i think is better.
Sorry for the delay. This solution is 100% mobile responsive
Brad, Thank you – that was brilliant – any recommendations on the quality resolution and size of the video?
I would use width and height 100% in HD quality.
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
PS: Any tip on centering the video as well?
Add
text-align: center;orbackground-position: center;to the video-background class in the CSS rule.Not hidden on smaller screens.
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.
Don’t see what?
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.
Sorry, my bad. Its Aspire Pro not Inspire Pro.
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.
You can download it from the downloads page if you are a Pro Plus member.