Video background Masking in Elementor | Web Design & SEO in Buffalo NY

By | March 10, 2020


Hi Rom. This is Amir Cohen from Be The
First Website. So today I saw your question on the Elementor community page,
and I think I have a solution for you, and I want to show you how to do it.
So first of all, let’s go and choose a video background. I’ll go to coverr.co and search for a free video. Choose the flames video. Okay I’ll download it for free save file, extract
the file and put it in Be The First Website directory, images for website be the first. OK. Now I’ll go ahead and open my
Premiere Pro click on new project, click on video mask house a directory will be the first with
a muscular mentor select folder ok right click import go to be the first here’s
my video drag and drop to our timeline will
automatically create a new sequence here as the sequence and I’ll add a hint
effect because I wanted to match our colors tint drug drop blue dark blue
dark blue yeah
something like this I taught you some this is about our colors our brand
colors so now it looks like a branded not like one of the stock videos I’ll
hit the ctrl + to export the file choose my directory then the first time we did
mask element Orange Save button and now export it as mp4 that’s good so now
that’s going open Photoshop I’ll open a new document alright 1920 which is the size of HD and
create defined now I want to add my logo is a PDF logo I’ll add it hit the Alt
key and with the mouse increase the size hit the enter key to accept the control
key and the left mouse key hit thumbnail to select my logo and then I can hide it
by clicking on the pie layer and double clicking on the background convert the
background to layer and click OK and hit the delete button or go and control
shift alt s to save it as a PNG he loved them mask video medium accent
doesn’t matter and it’s open time PNG now you see tiny PNG processed the image
and downsize the finally from thirteen point eight kilobytes to six point six
kilobyte which is great download this file save it let’s go now
to my media library and be the first website select the files choose the
Bulova mask video first of all I’m going to youtube and I’ll upload the video to
my channel so go ahead and click the upload video and add a new under
templates self templates go ahead and add new section video mask and a mentor
probably it’s gonna load the safe mode there and you also click on safe mode
and then click again on disable safe mode most of the cases this will work
and so the problem now add a new section open one big section hit the edit
section make the stretch and control full width and Stein and go to video
paste the link so appears right here now go and right click on layout minimum
height 400 pixels that looks good and go ahead and hit the style time go to
overlay upload the classic image upload and select our new file which is here
the size of 920 by 400 as you see here then go ahead you can make it going
opacity:1 center Center document on the scroll no repeats okay sighs they do it
cover now I have a mask over our video and that looks nice we can go ahead and
hit the responsive to look how it looks tablet on mobile the videos won’t play
so you can go ahead in this section go to layout and you can choose like 150
good for that as for the style place or fallback image to be presented instead
of the video all I need to do is go to premier hit the camera wherever I want
like a wallet here okay Jade bag Oh place it fallback image one fire side is
438 kilobytes ongoing and deleted because I don’t want such a big file on
my server to load go and open it more I can do I hear one fire and all eight
ctrl shift alt s save it under the PNG I want it to be PNG jpg that’s enough and
now it’s downsized to sixty one point eighty four kilobytes with quality of 34
the same size even 300 would be enough there to cover our page and that’s 11 K
significantly smaller than the 400 and something kilobytes we had before on
fire let’s go back any here upload the file go to my desktop double click
that’s much better so the background phobic will appear
when the video is not working mobile devices what I want to do now is go back
and here is the video mask Elementor I’ll click on it right click
copy go to my posts add new and Margot is Elemento category you want
to add the text like now I’m gonna add this section by
control-v this is the shortcode and here I’ll and the text now for my article
and here I’ll add the video on how to do it and that’s it from the publish it now
just to see how it looks like publish view the post, and we have a nice effect. Thank you and have a nice day.

Leave a Reply

Your email address will not be published. Required fields are marked *