Add Video Background
In this tutorial, you will learn how to add full-screen video backgrounds to your WordPress website using the free Elementor Page Builder plugin.
You can choose any YouTube or self-hosted video, and embed it by adding its URL to the section. You will learn how to set the video:
✓ Start and end times
✓ Fallback image (seen on mobile devices)
✓ Background overlay
✓ Blend modes
Transcript:
hey guys sorry Elementor here today we’ll go over the elemental video background options video backgrounds immediately draw your website’s viewer attention and adds to your overall website design so just before we dive in
be sure to click the subscribe button so you will receive more useful tutorials tips and tricks to make your workflow and web design a whole lot better so let’s begin create a new page and name
it and click Edit with Elementor I’m using the default 2017 WordPress theme
it’s not full width so let me fix this real quick click the COG here and choose Elementor full width that’s it it’s done we’ll choose a pre-designed page so click the add template icon and I’ll use
this coffee store 1 so clicking insert here so let’s go ahead and change the hero section to a nice video background click the section handle to edit its settings first let’s go to the advanced
and get rid of the padding here so just delete this great now under layout choose mean height and set it to 500 pixels
under style click the video background icon here and let’s insert a youtube link you can also insert a self-hosted video in an mp4 format upload it to your library and paste the link here just make sure it doesn’t weigh too much
so let me copy this link here and paste as you can see it works I have a video background for my hero section let’s quickly go over the options available here you see we have a start and end time and that’s very useful if you want to have a looped video let’s start a video here at 10 seconds now let’s set a fallback image this is necessary for devices then don’t preview videos automatically so just click it and
choose an image next we have background overlay this is really useful when your video is too bright or when you want to personalize your video with your own touch let’s see how it works first let’s
darken the video a little so the text will pop out so click the background
type and let’s choose the color black play with the opacity slider and leave it around 60% now to personalize the video look pick a color that suits your video I’ll pick an orange brownish color now
set the opacity to 100% and let’s click the blend modes here and play with those a little I’ll go would multiply well that’s it now you can add video backgrounds to your sections and boost your website design