In the past I wrote a tutorial on setting up looping video background for the top visible portion of the homepage in Altitude Pro here.
Today I am going to show how BigVideo can be used to set up the same. This method is more robust (does not have the "background overlay showing up as the window size is reduced" problem) and is preferred over the other.
Note: Auto play of videos (background or not) in handheld devices does not work esp. those by Apple. This is a limitation or rather a design decision taken by device manufacturing companies to reduce unnecessary data loading costs on tablets and mobiles. As such the background video being discussed in this tutorial appears only for desktops. On handhelds, fully stretched image will appear in place of the video.
Step 1
Convert your desired Front Page 1 section's background mp4 video to ogv and webm formats using a software like the free Miro Video Converter. Upload these 3 files to /vids under your site's root directory (sample screenshot given at the end of step 4).
Create a static image of this video. Miro has a 'Create Thumbnails' setting that can be used to generate this image. Go to Appearance > Customize and set this as 'Featured Section 1 image' in the 'Front Page Background Images' section.
Step 2
Upload these files to Altitude Pro's js directory:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hi Sridhar,
great post as per usual ! I noticed after implementing this on an install that it breaks the other images that are being pulled in the sections beneath. They don’t display on page load for some reason (talking here about the background images that are assigned to front-page-3, front-page-5 and front-page-7. I noticed that someone noted this issue with the previous article you wrote about integrating BigVideo in altitude and was just wondering if you have any ideas on a fix before I get elbow deep ?
Thank you squire ! 😉
Gavin, try this: http://www.studiopress.com/forums/topic/altitude-pro-background-images-are-not-loading-correctly/page/3/#post-152735
You’re an absolute legend ! Thank you so much Sridhar (and for the swift response) that was exactly the fix I was after 😉
This is great! Quick question. I’d still like to be able to have a text widget over it so I can have a call to action. What made that go away?
The widget is supposed to stay in place as can be seen in my screencast. Can you provide the URL of your site?
That hats what I thought. http://www.clickinsurancerates.com is the URL
Looks like you missed the last step, especially adding:
.front-page-1 .image-section {position: relative;
}
THANK YOU! Of course I’d only snag half the CSS! It works like a charm now. Thanks so much.
Looks good. I can see the whole tutorial to step 7. 🙂
@Sridhar Katakam This is a very helpful tutorial. Is there anyway I can easily convert all the remaining image section to video?
While it is technically possible, I advise against using multiple videos as they are resource intensive.
If you must, you would need to duplicate lines 3 to 9 in the initialization file and change the container selector for how many ever video sections are present.
You also need to make corresponding changes in front-page.php.
Hi Sridhar,
We have a problem with our site http://samucommunications.com on Internet Explorer after following this tutorial – the video loads but the bg image in front-page-area-3 no longer displays correctly. Any help would be very much appreciated.
Can you try going through https://sridharkatakam.com/how-to-edit-altitude-pros-style-css-to-fix-the-background-images-loading-problem/?
Hi again Sridhar, thanks very much for your response. I have attempted to implement your fix both manually and with a complete paste of the raw css you linked to but, unfortunately it only made things worse as shown in this screenie https://dl.dropboxusercontent.com/u/2523294/css%20error%20home%20page.png
As always, any help would be much appreciated.
Going back over your step-by-step instructions, the error appears with the very first change:
.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
/*border-top: 54px solid transparent;
margin-top: -54px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
position: relative;*/
z-index: 9;
}
changing this to the following solved our issue:
/*ammended Step1*/
.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
border-top: 54px solid transparent;
margin-top: -54px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
position: relative;
background-size: cover;
z-index: 9;
}
I noticed this breaks the parallax background effect in Altitude Pro. Is there any way to give the background video the same parallax effect as static images have?
Also, I’m trying to get video in 2 different front page widget areas (front-page-1 and front-page-3) and I think I followed the directions found in this comment thread, but I’m only getting video in front-page-1 and it’s the video I want to put in front-page-3. Could you look at my code?
front-page.php: https://gist.github.com/brentfincham/58fed1a399576645dd4a
bigvideo-init.js: https://gist.github.com/brentfincham/7c5d059827f7bc88f88b
style.css: https://gist.github.com/brentfincham/a44b387fd954ef9bbea6
Hello,
I did every step twice and I can’t get it to work…was just wondering if my file sizes were too big, if that would affect it from displaying somehow.
Would it be possible to provide a tutorial for how to do this with Atmosphere Pro?
I am also looking for a tweaked Step 6 that makes this work with the Atmosphere theme! Please help if possible
I did this, but the video does not seem to be loading. The background does, but I can’t see a video.
http://www.theturekclinic.biz/
And, I can only see the background if I put copy on top of it. 🙁
I want it plain. WIth no copy on top.
I noticed an error when checking with Chrome Inspector Console
error: video.min.js?ver=4.5:16 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
Very useful looks great. If I put the following css in I get a transparent layer over the video. However it covers the text too. How can I get the text to sit above it. I have tried applying z index 2 to the wrap this works on Parallax Pro tutorial but not here. Many Thanks
.front-page-1:before {
content: “”;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.front-page-1 .wrap {
z-index: 2;
}
Hi Sridhar,
I was hoping that I could get this to convert to the Aspire theme, I have followed your steps and made changes where It looked necessary to the theme, but I must be missing something…
Would you mind taking a look at the site? http://paraduxmedia.com
How is this? http://dev-aspire-pro-vide.pantheonsite.io/
Follow https://sridharkatakam.com/replace-front-page-1-background-image-aspire-pro-video/
[…] Sridhar Katakam on How to replace image background with a video for Front Page 1 section of Altitude Pro using BigVideo […]
Hi Sridhar,
Thank you for the great tutorials. I noticed that in some browsers (I have not been able to catch a screenshot yet), text appears (maybe before the video loads?) of the video properties in the left hand corner of the video area (affected site: http://andersonmobileestates.com/). Any thoughts on what this is and how I can avoid it?
Hi Marc,
I do not recommend using BigVideo any more for background videos.
The WordPress plugin I provided the details of in https://sridharkatakam.com/background-video-front-page-1-section-atmosphere-pro/ is the simplest and easiest method so far.
Can you give it a try instead?
If you want me to update this tutorial with that plugin usage, let me know.
Hi Sridhar!
I am using Altitude Pro for a new site redesign. I’m using video background plugin and it’s working great, but I can’t get the (youtube) video to show full screen – it has the black bars on either side – is something that youtube adds? I even tried to edit it in premiere pro but scaling it – but the black bars are back … any ideas?
Website is: new.jonbates.com
Thank you in advance!
Barbara Tierney
Business Pro theme has a full-width YouTube video background on the homepage’s front page 1 at https://demo.seothemes.com/business-pro/. I compared its CSS and tried applying it to your site but it doesn’t work.
Here’s the CSS I tried: https://pastebin.com/raw/hACKgvZW
You might want to contact the author of the plugin with this info and see if he can help.
Yes – I’ve been in contact with them – they’re saying its because it could be that the clip is an older video – not sure what to do… but thank you for trying!
Have you tried using a newer video for testing?
[…] the past I published a tutorial titled How to replace image background with a video for Front Page 1 section of Altitude Pro using BigVideo. Recently in another tutorial titled Video hero section in Workstation Pro I used the code based on […]