- Hey y'all, my name is Kori Ashton,
and this is a bonus video for this week.
I know normally it's WordPress Wednesday,
but you guys, I'm excited to show you a really cool,
easy fix for adding in a video into the Divi Theme.
If you've ever been interested in embedding a Vimeo
or a YouTube video,
it's super simple to do with the video module.
I'm gonna show you extra steps, how to even customize it,
all right now.
(upbeat music)
So the first way I wanna show you right now
is using a Vimeo link.
And of course you can do this the same way with YouTube,
super simple to do,
any hosted video that's hosted out on some other site
that allows you to either grab the URL,
or the embed code either way.
This is the way that we're gonna do it with
the link itself, just the viewable link.
So let me jump off the screen,
and here's what we wanna do.
We wanna jump over here to the little share icon,
click on that little guy,
open up and grab that link, copy it to your clipboard.
Let's jump back into our dashboard
and go ahead and click enable visual builder.
This is the page that we wanna embed this into
really cool, simple, quick way of doing this.
We're gonna scroll down to the exact area
we wanna embed,
and we're gonna put it just below this bit of text here,
add new module, we're gonna search for video.
And now it says video MP4 file or YouTube URL, right?
Well, it works as well with Vimeo.
So we're gonna click all of this,
insert from URL,
paste in there and check this out.
There's the video perfectly living there
insert in a post,
of course this works the same way with a YouTube link.
And we see our video posted right here really nicely.
The other thing I wanna do though,
is I don't really want it to be full width like this.
So I'm gonna go into sizing and just kind of
shrink it down just a bit.
Keep it in the center of the page
and just kinda move it down just a bit.
We'll put it at about 75%.
All right love it, looks great.
I really wanna make it very clear that this is a video.
So let's do a couple extra things to make it really
stand off the page.
I'm gonna enable visual builder again,
let's go in and just do a couple of extra steps.
It's gonna really make this thing pop off the page.
Clicking on the gear icon.
We're gonna scroll down just below here.
And we're gonna add in an overlay,
you can generate from video or you can upload your own.
I'm gonna go ahead and just click generate from video.
Nice, see that they give me a nice play icon here.
You have this nice hover effect that goes into
and allows your eyes to really focus.
You see right away that this is a video.
If you wanted to,
you could add in a custom thumbnail
that a very clear instruction
on why you should be clicking this to watch.
Maybe you put the links on there as well, totally up to you.
You can have a couple of different options inside of this
totally custom thumbnail.
This does not impact the video that renders out on Vimeo.
This does not impact your video living out on YouTube.
It only impacts the video right here on your website.
So from there,
if you wanted to change the color of that play icon,
of course you go into the design area,
you go into the play icon,
and of course you can change that to any color you want,
allowing it to match your theme, your brand.
You can change the size as well if you'd like.
The overlay that you're seeing here,
as we hover over, if you'd like to change that color
to being something that is more in line with your brand,
you can do that as well.
I'm gonna leave it with the default.
I think that's really nice and clean.
And I'm gonna go ahead and click check.
Nice, go ahead and save.
And now we see that nice play icon happening there.
I'm gonna go one step further
and really allow us to pop off the screen
since this has really no borders on it,
if I'm just scrolling down the page.
One more thing here,
let's go into the design mode.
I'm gonna go into box shadow,
and we're just gonna bring it off the page
just a little bit here.
I'm going to
lighten this up even more so
really allowing it to kind of stand off
as though it's got some depth to it.
And then we're going to spread it just a little bit further.
Nice, click Ok.
And now you can easily quickly see that there's a box
living there with a video in it, love it.
I clicked save.
I'm gonna exit the builder
and let's take one final look here.
Very nice user experience.
Now if I click play,
- [Narrator] Introducing Phenomenal Aire, the Phenomenal...
- Plays right there, and of course this is fully responsive.
Hey, so I hope that that was easy for you to follow.
If you have further questions,
be sure to put them in the comments below.
I'll do my best to answer them.
Of course with Divi,
you have support directly from Elegant Themes as well.
You can head over to their website,
be certain not to put too many videos
inside of one page though.
At times we've seen that start to slow down a website
and that can certainly impact your user experience
and ultimately SEO. Right? Yikes.
All right, if you liked this video,
please click like and consider subscribing to my channel
because every Wednesday I'm creating content just like this.
Plus I have like over 400 other videos
here in my YouTube channel that you can check out
all on the world of WordPress.
All right, have a great one y'all,
I will see you next time, bye everyone.