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
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 don’t forget to
subscribe to our YouTube channel to see
more videos and tutorials see you later
