In Twitter a user asked:
@srikat Client loves Infinity Pro-is it possible or is there a tutorial to add a video background on the home page? #GENESIS #WordPress
— Sun Coast Web Studio 🇺🇦 (@SunCoast_Web) January 16, 2017
We can easily set up background video for any section in WordPress using the free Video Background plugin.
Step 1
Install and activate Video Background.
Step 2
Create a static Page titled say, Home.
On this Page, in the Video Background meta box specify .front-page-1 for the Container.
Upload/select the links to your video’s mp4, webm and poster image.
Step 3
Set Home as front page at Settings > Reading.
Step 4
We will now exclude Front Page 1 section from being able to be set and get a background image via the Customizer.
a) In lib/customize.php, change
$images = apply_filters( 'infinity_images', array( '1', '3', '5', '7' ) );to
$images = apply_filters( 'infinity_images', array( '3', '5', '7' ) );b) In lib/output.php, change
$opts = apply_filters( 'infinity_images', array( '1', '3', '5', '7' ) );to
$opts = apply_filters( 'infinity_images', array( '3', '5', '7' ) );
Awesome! Nice, simple, straightforward instructions that even I can follow:-) I can’t wait to try this. I just started building my first Infinity Pro site. Thank you!
Just done this, works great!!!!
Hi Sri
I´ve done so. The video looks great. But then images in front page. 3, .5, .7 don´t show any more. Could this be possible? Appreciate your response. Thanks!
Ohhhh this is good! Thank you I’ve been searching for one of my client websites.
Does not properly resize for me. As I horizontally shrink my browser I get a white field at the top and bottom of the video. I am using mp4 with a webm alternate.
I think it depends on the aspect ratio of the video. Have you tried using 1920 x 1080 video files?
Hi Sridhar,
Same problem, not mobile responsive below 1024px. The video shrinks, adding a white box above and below. I’ve assured that the video was resized to 1920x1080px through the use of HandBrake. Unfortunately, at this time the video will only be visible in Desktop.
Best,
Mike
It is not a recommended practice to have videos auto play on tablets and mobiles. The plugin is designed to show auto playing video as background when played on desktops at standard laptop/desktop resolutions like above 1400px. It does not behave/scale well when viewed on smaller widths on desktops.
On tablets and mobiles, the video’s image will appear.
Is there a way to have the video ease-in? It seems the photo fall-back loads immediately and then flashes over to the video, which seems jarring. Thanks 🙂
For some reason the video is playing on mobile as well and I am unable to overide it as i only want the poster to show on tablet and down
Can you provide the URL of the site?
Which mobile device are you using?
Hi there, I tried this and it works great! Only issue is that I have a thick black border above and below the video. How can I get rid of that PLS?
Can you provide the URL of your site?
Yes I did in the Name/Email/Website section. It is fatcatmarketing.ca. Thank you!
Just checked the site and I don’t see background video being used. For which section is it on the front page?
Hello! Yes, homepage, front-page-3. Not sure why you don’t see it…fatcatmarketing.ca. Thank you for your help!
Got it.
Add this in
style-front.css:That looks PERFECT!! Thank you so much for your tutorial and your additional support.
I notice you’re no longer using a video on the front page. What made you switch away from the video?
Hi!
Please can You tell me how to do same on showcase pro theme?
Thanks!
You follow the same steps for Showcase Pro as well. Have you tried?
Follow https://sridharkatakam.com/video-background-front-page-1-section-showcase-pro/
Video Background Plugin has failed. Support shows many who have no luck with it.
Can you provide the URL where you have tried using it and find it isn’t working?
A newer version of the plugin (v 2.6.1) has been released earlier today. I’ve tested it and it’s working fine.
See https://wordpress.org/support/topic/temporary-solution-do-not-ugrade/#post-9533280
Sridhar would it work if I upgraded the plugin?
Paid version is not needed unless you want the features offered by that version like showing YouTube videos as backgrounds.
No I wouldn’t need that feature thanks for the clarification.
I’m using latest version of the plugin, but the video hasn’t showed up, yet it works on a landing page I created a while ago. Any thoughts? And Scott did you get it resolved?
Can you provide the URL of your site?
Many thanks.
I’m making some major changes over at the moment so have taken it out of mm so that you can take a look.
However, it’s Xmas and if you can’t take a look for a few days I understand. but would appreciate if you can let me know, as I’ll be working on it sporadically and need to put it back into mm until you have time.
The url is http://www.janeunsworth.com
Thanks again.
Not sure why the video background is not appearing (assuming you have followed the steps in this tutorial correctly).
I can take a look inside if you wish. Send me WP login via https://sridharkatakam.com/contact/ (there’s no charge).
Fixed.
The Container should be set to
.front-page-1.It was set to
front-page-1.Hey Sridhar
I can’t thank you enough, brilliant detection. A quick question now you’ve fixed it, I notice that the area goes black, then white and then the video background arrives, where it would be ideal to have the video straight away. Is that just the way it is, is it the hosting, or something else?
Many thanks.
Jane
You could try adding
in
style-front.cssto set the video’s fallback image as the background for that section in CSS which will appear first before the Javascript included in the Video background kicks in – which will load the (same) fallback image and then the video.Ah that helps it slightly, now the video arrives then it goes black and then video properly arrives.
Do you see the same http://www.janeunsworth.com (save you scrolling through).
[…] the comments section of Video Background in Infinity Pro, a user […]
great! but how can I use this on dynamic website builder using EZ homepage?
i ment in the widget sections with videobackround?
OMG…..
OMG…..
OMG…..
I am very grateful.
Thank you very much again. But I have a question.
I need make the same but in FrontPage 4. It is possible?
Is it possible to use this strategy to make two video background sections on a StudioPress theme homepage? I successfully used it for one section on my homepage at http://www.laurarabell.com... thanks for this great tutorial!
Yes. You can have multiple video background sections using the shortcodes.
https://wordpress.org/support/topic/mutliple-videos-on-one-page/
https://pushlabs.co/docs/video-background-pro/#using-the-shortcode
Thank you very much for this tutorial! having a issue though where it will load a blank page until I refresh then it loads correctly. Any idea how to fix? :3
Thank you for this clear instructions.
Brilliant tutorial. This solved a problem I’ve been battling with.
Hi Sri
I´ve done so. The video looks great. But then images in front page. 3, .5, .7 don´t show any more. Could this be possible? Appreciate your response. Thanks!
Hi! I just followed these instructions and the video background is showing fine but the words are not showing at all. How do I get the words to show “Sylish & Modern”. I have words and a logo in those widgets but nothing is showing up. http://www.ancfairfield.com
I’m sorry for the multiple submissions but there’s another problem. None of my menu options are showing up via mobile after implementing this. Can you please help! This site is live.
Looks like you’ve removed the plugin as you found it does not work properly.
Can you create a staging site and set it up and share the URL?
I’m stuck! I followed your directions exactly and still no video : ( Please help if you can…
http://kpcreativedesigns.com/Robin/
I followed your directions exactly and the video still isn’t working…I’m stuck. Would you be willing to help? Thank you!! http://kpcreativedesigns.com/Robin/
Great guide, thank you. However I am running into an issue with the menu on a mobile viewport. It seems to move around or make the site title go transparent. Is this due to upgrades of either the plug in or theme, since last this tutorial was made?
My website is: http://rikaathena.com
After a couple seconds after you move up and down on the page, it occurs and when you shrink the size of the window on a desktop.
Thank you for your assistance!
Hello,
I have configured Video Background plugin to work with Genesis’ Infinity Pro child theme per the instructions on this post.
I set .front-page-1 as the “container”.
I can only see the video when I am previewing the homepage within the Customizer.
Can you please help me?
Thanks!
Sara
The page I need help with: http://staging.fierce-order.flywheelsites.com/
Hey Sridhar,
I am not able to get the video to run properly in the background, as per your instructions.
I made sure to set the container to .front-page-1 and I used your recommendation to Jane Unsworth:
.front-page-1 {
background: url(http://accessbis.com.au/wp-content/uploads/2021/09/video-background.png) no-repeat center;
background-size: cover;
}
I put this code at the bottom of the /* Front Page 1 section, believing this was the best place.
Unfortunately, when I load the homepage only the background image appears for a split section, then the whole section goes black. No video.
Is there any advice you could give me as to how to make this work? The website in question is https://accessbis.com.au/
Hi Ian,
I see a message that my connection is not private when I try to visit your site.
Screenshot: https://d.pr/i/JoeFuV
I just tested the tutorial in the latest versions of Genesis and Infinity Pro and it works fine w/o any changes.
LMK if you want me to set up a live demo for you.
Hi! The plugin Background Video is 3 years old and not supported by recent version of WordPress. Is ther an alternative plugin we could use? This would be so much kind of you to tell, please.