How to Add a Video Background to a Section in Elementor

welcome to the elementor pro i'm jared and today we're going to talk about putting a video into a section on your website video is definitely a trend when it comes to elements on a website you know we've always been able to embed a youtube video you know for a long time or something like that but having a video in the background of your hero section the top section of your your homepage that plays and you have some text over it or something like that definitely adds a premium feel to your website now it can be a bit tricky to do this because video is typically large in file size and in order for a video to load and start playing it needs to be a reasonable file size and you have to think about all of those things before deciding to do this because you could slow down the process of a page loading substantially by throwing a video in there so we're going to look at how to do this we're going to look at how to compress a video so that we get it down to a nice small file size that is not of the highest high quality but is good and loads fast and still provides that experience that we wanted the person viewing the website to have so i have our kind of template page here that doesn't have anything in it the first thing we're going to need to do is add a section so we'll go ahead and choose a just a single section here we're going to click and make sure that we are editing that section and we'll go into the style area and in here you can see there's a video tab and we need to provide a video link and then we also have the ability to set a start time and end time only have it play once do we want it to play on mobile and we can set privacy mode which is for youtube links you could also throw a youtube video in here as well but i prefer just having a compressed file that we can throw in there um privacy mode for youtube videos allows you to upload that video to your youtube channel and mark it as private but then embed it here so that way the people that come across your youtube channel don't see the video but it still works here and then we have a background fallback which essentially is an image that you would put in place should they the video not be able to load or um you know some something along those lines or if you have it set to play once this is the fallback image that would load and display after the video is done playing so i have a video here that we're going to go ahead and use i'm just going to go quickly and show you that video here it is so it's got music that's something that we don't need so it's a nice video it has audio it's pretty high quality it's a short video which is great we don't want something super long we want something relatively short keeps the file size down and people are not going to sit there and watch a video that's playing in the background for too long so we want to compress that now there's software that i've used um that works really well it's called handbrake it's free it's open source you just download it and i'm not going to go through the entire process but you download it for free it's uh available for mac and pc you choose open source and that is the original file that you're going to compress and then there are some options and you can actually turn off audio so there's tabs video picture audio subtitles chapters if you go under audio you can remove the audio that's going to decrease the file size and then you can also choose from some of the compression presets that it has but typically the compression presets are going to be pretty good you can slide the quality slider back there's a quality slider so you can try compressing it without uh without decreasing quality and see what file size you get i recommend that you keep the file size under 20 megabytes and i really recommend that you keep it as small as possible to kind of show you what i was able to achieve here with this um with this jake's file that file was 41 megabytes it was hd quality as you can see here 1920 by 1080 and it was 20 seconds in length i was able to compress it down to 2.7 megabytes which is still hd quality it's still 20 seconds in length but it doesn't have any audio let's take a look at that compressed version so if you look really close and it may be hard for you to see in this video because you're watching a compressed video or through compression here on youtube this video still has a lot of clarity to it it is not as sharp as the original video but it is still really good and looks great there's nothing there even when the text pops up on the end of the screen here the text still uh looks you know relatively sharp it's not so bad that it looks bad i mean i'm not afraid to put this out there for a client and let them uh let them see this it's not going to be a bad representation of them at all so if you want to see this in action you can actually go to the jakes nut roasters website which is a website that i built and you can see the fallback image displays for a few seconds before the video plays that's another reason that you would want the fallback video or the fallback image there is so that it can display while the video is loading and people aren't just looking at a black box so you can see that this video did load pretty fast i'm located in northwest montana and don't have the fastest internet so you can see that it did load pretty quickly for us you know somebody even in somewhat of a rural area so that looks good all right so we've understood now the video that we should be using the video size some of the things as far as compression trying to get it as small as possible so that it loads now we're going to look at putting this into our website so with the video link if you have a decent hosting account go ahead and upload it to your wordpress media manager and just put it there cheaper hosting platforms you know that are probably 20 bucks or less per month are not going to load files like this very quickly they're going to throttle the bandwidth and it's going to load pretty slowly so i do recommend in those instances uploading your video to youtube or vimeo or a platform like that in which you can put the link here and then load that in but we we are going to open up a the media manager here so i'm just gonna go into the dashboard we're gonna go into media and i'm gonna grab that compressed jake's file and drop it in it's gonna upload super fast because it's such a small file and you can see it doesn't give us anything other than just you know that little movie icon but over here i can get the full url which i'm going to copy to my clipboard and then head back over to elementor and i'm going to paste that in now you can see it's very small obviously we need to make some adjustments there i'm going to go back to our layout i'm going to choose height minimum height and then i'll set a minimum height so maybe for a video i want to make sure that i'm not cutting off any of the text and so something like 460 or maybe even going 480 would be great i'm not cutting off much of anything make sure you watch through your video to so you can see everything you don't want the video to you know people to say oh i can't tell what this is about or something is being cut off you want to make sure you're giving them enough room so now we have the video in place we do need to upload a fallback image a background fallback you know there's a couple different ways that you can do this you can create a um a screenshot of your video that just sits there and so one way of doing that might be to go to your video and on a mac or a pc you can easily create a screenshot just by let's go ahead and do that so we've got a screenshot now i can click here i can grab this and upload it what's funny is the screenshot will probably be larger than the video so i would want to make sure to compress and put an image in place that was not too big so it's uploading now um taking its sweet time like i said rural internet here up in northwestern montana all right so now i have my fallback image in place um so that if i was to choose play once the video would play through once and then it would land on that fallback image which is a great option too especially if you wanted to grab people's attention with a short intro video and then have something for them to stare at that was a little bit more informational you know because this is a background now we have the ability to add content over the top of it so as you can see we still have our column here which we can have multiple columns we can build out this section with anything that we want and still have the background video in place if you have a busy video like this one you probably don't want to block things up too much you might want to keep it simple if not don't even put anything in that column at all just make sure that you have your section height set so that it keeps that height so obviously another thing to consider is mobile devices it does have an option to not play on mobile which right now that is what it's set to so if we went into responsive mode and looked at mobile all we would get is that image if i had chosen to play on mobile then it would play the video on mobile but we also need to consider when we're here in this mobile orientation that we set the height appropriately obviously a lot of the video and this background image is getting cut off so our 480 pixel height is probably not realistic for a mobile device so we're gonna drag this back maybe to 250 and that would be a good height for this instance on a mobile device and of course we can also check on a tablet and see what that looks like i might even bring the 480 back to something like 380 on a tablet just so that we have uh you know the form factor or the aspect ratio i guess you could say um or i should say for that section so now if i look at the different responsive modes tablet and then mobile everything looks good and in this section of course i can go and make any other changes if i needed to add a background overlay to darken uh the the video so that the text would appear better on top i can do that i can go ahead and add uh like black to it and uh so we'll just go ahead and do that and then the opacity is set right here at 0.5 and i can adjust the opacity to darker or lighter whatever i feel like i need and then if i did add something like a heading to the top of this i can see the text a lot better so i can go ahead and change this to white just to make it stick out a little bit better so now i've got text over the top of a video if i go ahead and turn off play once again you can see the video plays in the background i've got text over the top i can use any of the elementor elements over the top because it will go right in this column and i could build this section out pretty neat so if your background video was more subtle which if you're going to add things into the column i would recommend that your background is more subtle movement so that way people don't feel like they're missing something like why is this blocking this video i want to see this video so if you are going to put elements in the column i would recommend doing something like the background being um something more subtle like uh uh you know trees blowing the wind blowing and i don't know something like that that's just like uh it's it's a little bit more than an image but not something as uh as active as the video that i've shown you here so that walks you through the process of adding a video to a section here don't forget the part of going through and making sure that your video looks good on other devices or if you're going to choose not to have the video play on mobile that you have a fallback image that looks good in there so you know even if i had a fallback image i want to make sure the crop looks good and all that stuff as well you know i uploaded a pretty large fallback image there i recommend the fallback image being a lot smaller than that well under like a megabyte or less because you're adding a lot of overhead to this page that has to load in order for the page to display so keep those things in mind but that's going to do it for this video make sure to check out all the other videos that we have here on elementor including my elementor course which is linked down in the description below if you have any questions or comments let me know down in the comment section click that subscribe button because we put out element to our videos three times a week and we want to make sure you get notified when all of them are released so thanks for doing that and we'll see you back in the next one take care

Channel: Daily Learn WP

Views: 1,231

Keywords: elementor video background, elementor video background mobile, elementor tutorial, video background wordpress elementor, video background elementor, elementor video background responsive, elementor video header, video background wordpress, wordpress video background, add video background to wordpress, elementor background, elementor pro video background, website video background, elementor, elementor page builder, elementor wordpress

Id: r3HUHwijrUk

Length: 14min 17sec (857 seconds)

Published: Fri Sep 17 2021