Video Background in Elementor and Ocean WP

Подписаться 32 тыс.

Просмотров 109 тыс.

50% 1

Learn how to create a video background using the free Elementor page builder and the free OceanWP WordPress theme. Also how to make a transparent header that sits inside the video background. If you want more videos like this please hit the like!
➡️Get 3 Free Stocks on WeBull (like AAPL and FB when you deposit $100): act.webull.com...
➡️My Blogging Blueprint: www.dearblogge...
➡️Try Bluehost and Get a Free Domain Name: gregnarayan.co...
➡️Holiday Bitcoin and Stock Related Gifts: www.ipo52.com
➡️10 Ways I Make Money Blogging: • How To Make Money Blog...
➡️Follow Me On Instagram: / narayguy
➡️Music in My Tutorials: www.musicbed.c...
➡️Best WordPress Theme for Influencers: bit.ly/2wD0CT1
Finally, a RU-vidr asked if I had a Patreon to "tip" me for finding his WordPress solution. So I made one but please don’t give much, it’s worth it just having you here :) / gregnarayan

Опубликовано:

23 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 217

@freedomofspeech122 6 лет назад

Thanks so much Greg! You saved me after I passed through quite a bit of grief not finding the way that would ACTUALLY WORK!

@ahsansagheer6861 4 года назад

Watching in 2020 best guidance ever thank you.

@narayguy 4 года назад

Yay!

@adamprokop 4 года назад

Your videos are so smooth and nice to watch!

@npithia 6 лет назад

This is good. Would be nice to know how we can add a sticky menu with no transparent background so when I scroll down it has a solid background.

@jerrybustamente1046 5 лет назад

As usual fantastic video! Thanks Greg.

@flexwinggpipi 3 года назад

Great tutorial freind but i wonder does this content slow the page loading as your using video?

@corileigh1035 6 лет назад

Really awesome video Greg! Love the video background idea! Very helpful!

@narayguy 6 лет назад

Thanks Cori! Becoming obsessed with Elementor here!

@karentraer_creates 4 года назад

I agree, short and to the point, complete and accurate explanation. This is something I definitely want to do, so many thanks!

@marc-andrechevalier973 5 лет назад

Thank you for a very quick and simple tutorial. Subscribed.

@carylconte1752 4 года назад

Hi! How did you make the loop/transition so smooth? It looks seamless. Mine shows a black screen/glitch right after the video ends before it starts again.

@shawnzhang9120 4 года назад

Hi sir，any way to remove the white line down the menu to make it more universal looking？

@kapil247 2 года назад

hi greg thanks a lot great tutorial just one thing is it possible to maintain the audio of the video in background?

@narayguy 2 года назад

Elementor has yet to do that one, apologies

@euovitoteu 3 года назад

Thank you so much for the tutorial! It helpede me make a video section on my web. Do you know why the quality of the video is way worst at the beginning of the video?

@narayguy 3 года назад

Just loading probably

@satrialesporkstore7889 3 года назад

Thanks for the tutorial. Is there a way to do this without Elementor, or rather with something FREE?

@narayguy 3 года назад

Use elementor free version!

@razaksayyad2650 3 года назад

when i view my website the video is blure and it's just loading sometimes for some seconds plz make a video on how can we avoid these blure videos on the background

@narayguy 3 года назад

Ah ok, maybe low file size or width and height?

@waltervanrooyen6169 6 лет назад

Having an issue where the video is "fitting to screen" when i close the elementor editor. It's leaving a big grey gap on the right side. Any thoughts on how to fix this?

@kayXtam 4 года назад

Thanks Greg! It worked out in the end. The only thing that isn't working is the mobile visuals. For some reason the video doesn't show on mobile devices.

@alpyerdm 5 лет назад

Hi I did it, worked on desktop but didnt work on mobile. How can i solve this?

@tc8939p Год назад

How do I get rid of the youtube link popping up on the top left conner of the video after it loops to the beginning?

@narayguy 10 месяцев назад

Should be a setting in elementor to remove the video player details or controls

@Gideonwachira 3 года назад

Were you able to solve the white line on the header part

@narayguy 3 года назад

Hehe yeah lots of commenters hooked it up

@robertbotman4881 5 лет назад

Anyway to have the audio play in the background video? I'm using WordPress Ocean WP. My original RU-vid video has audio, but when I use it on my WordPress website it has no audio.

@johndumas4467 5 лет назад

This is driving me nuts... Could you possibly give me a bit of help? I CAN NOT edit (or change) background color in a section. When I click on edit section, there is nothing there when I click on the Style tab. Layout and Advanced are there but not Styles. I've tried adding blocks both from Elementor and Envato. I've tried adding the heading and text elements and nothing I do shows me the Style settings. I'm using the free Elementor and OceanWP. Both current versions. I've also tried deactivating all plugins. Nothing works. It should be a simple thing to create a colored bar at full width and put text in it, but it is NOT working out that way.

@narayguy 5 лет назад

Can you send a screenshot via snagit of what you’re seeing? I’d try to just fill uninstall Wordpress, resintall everything. You can export your content to save most of it. Seems like part of the files got lost somewhere...

@bartomiejbiedronczyk7354 5 лет назад

Can you tell me how to play it with sound ?

@pooowie87 5 лет назад

Thank you so much for the video! Liked it! I've a question about the loading of my page. If i'm looking at your video, your loading time is fine. But my websitepage gets very slow. I use a backfall image, but would prefer a quiker loading time of the video. Now you see first the image and than a black screen with a loading sighn and after that my video. I contacted my host and they told me, youtube video's taking a lot of space and are making your website slow. I spent hours on my contactpage and i don't want to delete the background video, because it fits perfectly! Do you have any tips to solve this problem?

@Laura-imflyingdutchgirl 4 года назад

I have exactly the same!

@Youtick 2 года назад

Hi how to add the sound of the background video? Thx

@narayguy 2 года назад

Still working on it

@dragondronetraining4645 2 года назад

How do you remove the white line on the header that shows on the video?

@narayguy 2 года назад

I think we have some nice commenters answering that below :)

@Saoj1981 5 лет назад

How did you make the video loop? and how did you get rid of the youtube labels, controls, and etc?

@jonas8085 4 года назад

did you figure out?

@grandma8403 Год назад

@@jonas8085 you should upload the yt video to ur wordpress media and then there should be a link to it. simply copy and then paste the link to it :)

@jonas8085 Год назад

@@grandma8403 damn thats long time ago, im professional wp developer right now 😂

@grandma8403 Год назад

@@jonas8085 oh LMAOO good for you though! ive still got a long way to go

@UserU 6 лет назад

Thanks for the tutorial, all I needed was to replace the video with an image!

@transformedtrainingprovide8235 4 года назад

Thanks for the help but can i use this with any wp theme or only ocean wp?

@user-ky1nz3ck2n 5 лет назад

Great video! Thank you Greg, but can you redo the video using image background? I tried using image but the image became blurred after selecting cover. It was only clear on repeat option

@carlvanderpal5321 5 лет назад

Greg, what's the link for the video you used please? As the one I am using is a weird shape, and has black bars at the top and bottom when I do full screen, which means it's a small shaped, and not a true 16:9 ratio. Thanks

@jessicasmith4478 5 лет назад

I'm having problems finding a web builder that supports the background video mobile. Does this work with mobile? I have Wix on mobile it's a standing pic.

@carolynlogan8011 4 года назад

It's my understanding that the video backgrounds do not work on mobile phones. You can have it there, but it won't show up at all except on the desktop etc.

@hectorcontreras8116 4 года назад

Hey man thanks for the tut. Quick question how do I add padding to the left and right of the video?

@narayguy 4 года назад

I’d put the video in an elementor column or text element and add it around that. Or you can write a div style around the video code.

@hectorcontreras8116 4 года назад

Greg Narayan if I do that it won’t play automatically. :/ if I do happen to write a code do I need to go to the theme editor?

@dennerz 6 лет назад

Thanks for the tutorial! Is it possible to replace the video with an image if it's in mobile mode? TIA

@danir.8299 5 лет назад

hi, of course : use a fallback image as told in the video at 10:56 ;)

@TheJD70 6 лет назад

Great video Greg! Any idea how to stop video replay? The video I want to use isn't continuous loop so I'd like it to stop playing after 1 rotation. Thanks in advance!

@narayguy 6 лет назад

I found a semi answer on the codex, people have your same problem, but again not a great answer unless you know code... wordpress.org/support/topic/video-on-background-no-loop/

@TheJD70 6 лет назад

Thanks!

@jonas8085 4 года назад

Why does it shows the video info when starting and ending to play?

@narayguy 4 года назад

You can remove that with free elementor settings :)

@jonas8085 4 года назад

Greg Narayan where?

@savageegoclub1191 2 года назад

when I do this it shows the youtube channell and the title of the video at the begining.. How can I get rid of this? I am in need!!

@tareknajjar805 3 года назад

I don't know if I'll get answer 😅.. But anyway I'll ask my question. How can I add my video to my website not from RU-vid but it already downloaded from another website and it's on my pc now.. Si what should I do

@narayguy 3 года назад

Hey Tarek! Haha sorry for the delay radar a bit foggy. What you can do is upload the mp4 file to Wordpress, then embed it right into a post or page like you would insert an image! Hope that helps m8

@tareknajjar805 3 года назад

Really thanks ❤️

@chengalvap3731 4 года назад

Thank you so much for the video! but having tough time to add text overlay on the video can you please help.do i need any extra plugin for the same? if yes pls guide.

@narayguy 4 года назад

You can insert some text below and then give it negative margin to raise it up in the screen

@chengalvap3731 4 года назад

thanks@@narayguy well couldn't text on the video but than I did create my website please have a look www.adleklinks.com....learnt entirely from your video....thanks Guru!!! now struggling with sidebar which is just ok but i want extraordinary custom sidebar showing error unable to download template from elementor library so that i can create popup but than....lets see

@marcoguada42 5 лет назад

I got really bad score using video background in section due to javascript parsing.. how to avoid this?

@narayguy 5 лет назад

I hear ya. I was able to get dearblogger.org significantly faster hiring W3 total cache team and using that plugin. Honestly the site speed thing is very tough, we all need an expert on server stuff.

@niller56 6 лет назад

Great thanks. Can you give a hint to where you have found the video you used in this video?

@narayguy 6 лет назад

Haha yes. Hint: bottom off the free elementor page templates, be a hero :)

@izharshaikh5067 5 лет назад

But how do you make it work on the mobile version ?

@narayguy 5 лет назад

They done have mobile video option yet :(

@bernardosouza9158 6 лет назад

You saved my life, man!

@gsaxita 2 года назад

my elementor is fre version , it not have video botton like u say at 2.04 back groud video , how I do ?

@OsirisHM 4 года назад

Hi I searched alot on your channel how did you edited the home page ? could please add that video as well? i can't seem to find that part. Much appreciated. regards

@Cudab 3 года назад

do you know why it shows up as slideshow (not video) for me on the background? under edit column?

@narayguy 3 года назад

Can you send me a screenshot to greg@dearblogger.org I’m not quite sure why

@alexisfichou7543 6 лет назад

hello ! How do we avoid heavy loading times with video background like theses ? Thank you :)

@vineet5678 5 лет назад

use a fallback image as told in the video at 10:56

@CavinAmble 3 года назад

When I do the background through RU-vid it shows briefly the cover photo and then shows the progress bar, Vimeo is the same I can see some of the display buttons from vimeo. Do you know why this is happening? I tried also uploading an MP4 into wordpress but its too slow

@diyanshusrivastava8180 4 года назад

Sound does not work :(

@BeHappY-pz7xk Год назад

Hello, how to delete the RU-vid channel name and the video name in the RU-vid video background

@narayguy Год назад

Hi! Should be some advanced settings in elementor for that, I’ve seen the toggles in there

@jaimegumban557 3 года назад

when I do it on the right side it the image overlays the text anyone knows how?

@narayguy 3 года назад

Send screenshots?

@sudhanshumishra3300 5 лет назад

Does it work on iphone?

@DROZDZU91 5 лет назад

Thx Greg! How can I delete the white line below the menu?

@narayguy 5 лет назад

Oh that line is the worst! It’s in customize, header settings just a checkbox option or along those lines :)

@DROZDZU91 5 лет назад

@@narayguy thank you!

@DROZDZU91 5 лет назад

@@narayguy Is it possible to change the color of the header on different pages? white header on a black background and vice versa.

@augustoalejandroreynadelag8504 3 года назад

What happens if i wanna use a video that i already have in my computer ? How could i do it ?

@narayguy 3 года назад

You can upload the mp4 file into Wordpress :)

@augustoalejandroreynadelag8504 3 года назад

@@narayguy thank you very much

@mycustompaintedlife502 3 года назад

I'm listening to a few of you videos. I lost the edit with elementor in the top bar!

@narayguy 3 года назад

So glad!! Update elementor and if that doesn't work, disable plugins, could be a plugin conflict causing elementor top bar removal :)

@karen3705 5 лет назад

how come when I create a new page there is no content layout boxes with options? it's just blank

@narayguy 5 лет назад

Install classic editor plugin? Yes elementor pages are blank tho...

@nirmitrajdhan2330 5 лет назад

Hello There ! i want to ask , how can we get the details of The data of users like mobile number and email id by which they signed up into our website ?

@carolynlogan8011 4 года назад

Thank you!

@andikajuliyanto1989 5 лет назад

why the sound from the video doesn't come out? please reply

@narayguy 5 лет назад

Just a standard setting unfortunately. There are ways to autoplay videos with sound tho, using custom RU-vid links

@lisahuey3994 4 года назад

I followed all the steps, but the 2:27 part for the background video on Elementor isn't there. Instead, it gives me an option to choose an image, but not a video. Is it because I did not upgrade to the Pro version??

@narayguy 4 года назад

No you don’t need pro! It’s maybe just moved a few settings away

@93tkid 5 лет назад

I got the video background to work but the video is mute. How do you get it to ply its sound too?

@narayguy 5 лет назад

Try the section settings, usually you want people to press play tho

@93tkid 5 лет назад

@@narayguy okay thank you sir.

@sumukhhrr7403 5 лет назад

It shows the RU-vid title and other options. How to overcome this?

@narayguy 5 лет назад

There's allll these little checkboxes in Elementor underneath the video background. There work wonders, autoplay etc

@sumukhhrr7403 5 лет назад

@@narayguy the options are not there for a background video, what you are saying is for the video element.

@narayguy 5 лет назад

ah you're right my fault. try to specific start and end time. please post link and i'll check it out

@clayraterman 5 лет назад

Did anyone fix this issue yet? Having the same trouble

@tugliife 5 лет назад

I am also having this issue...

@CarolynSueLogan 6 лет назад

Great video. I'm searching on how to have full screen video with sound in elementor pro with Ocean wp? any suggestions?

@narayguy 6 лет назад

I’ll ask Elementor! Google doesn’t seem to know how

@CarolynSueLogan 6 лет назад

I did it but not able to with it being the background

@afiqaimi91627 6 лет назад

HI, greg.. why mine is it not mobile friendly? the video doesnt play on background when using my phone... can i know why?

@5stripesgaming977 6 лет назад

How can I center the video? For me it allways start from the "right side". Thanks for the tutorial! :)

@zerobambiro 3 года назад

Would be nice if you would remove that ugly line under the menu too.

@narayguy 3 года назад

Right it’s a setting in Wordpress customize

@oconnor1894 3 года назад

Any way to add audio?

@harryhallervictor 3 года назад

Hi there! Is this tutorial still working sept 2021?

@HCBCHEMISTRY 5 лет назад

2.05 how come on mine it did not have the option for the video. It had the first two.

@monkeydruffy3765 6 лет назад

hey thx for sharing this! I have a question, how can i add a video from my desktop or from my ftp server. There is written (where u add youtube link) - RU-vid link or video file (mp4 is reommended) - so how to add the file? Thx in advance

@Percuman 6 лет назад

hi, thank you for this video, I have a question, how to have sound with my video? I'm using onetone theme, and before the update with Elementor, my video was played with sound I can't find how to do that with the new version and Elementor

@narayguy 6 лет назад

Wow that’s cool! I hadn’t heard of sound working. Onetone always played background videos with sounds, or just normal videos?

@Percuman 6 лет назад

Greg Narayan so with Onetone (previous version without elementor) I had the sound and an option to mute it (in customize)

@Percuman 6 лет назад

There is no option to have the sound with Elementor?

@narayguy 6 лет назад

Ohh I thought you meant Elementor had the option, then it updated, and now it doesn't. I don't have that option, here's what I see: www.dearblogger.org/wp-content/uploads/2018/08/Screen-Shot-2018-08-02-at-11.50.13-PM.png That said, maybe there's still a way, will contact them for us!

@Wannabelocal 4 года назад

dont u have troubles with copyright when u use videos from youtube?

@gbprizes3100 3 года назад

You're awesome!!!!!!!

@narayguy 3 года назад

Thanks you too!!

@elinehendriksvideografie 6 лет назад

Somehow I don't see these OceanWP page settings that are shown at 1:07 in the video... I just have a (more or less) black page. Can someone explain me why this is the case? Would be very helpful! :)

@mariadelpilarreyeslopez2879 6 лет назад

Always outstanding! Thank you so much!

@narayguy 6 лет назад

Yvw! :) Great to hear from you Maria! Hows the blog goin these days?

@cip7495 6 лет назад

@Greg Narayan hey man but when i go on mobile its not showing the video :(

@Robopro 4 года назад

Oh Damn, 2:01 into your video, I only have "classic, gradient, and SLIDESHOW"... probably got updated and changed?

@jonas8085 4 года назад

yup

@user-jd9tr4pb1h 3 года назад

how can i get this theme

@iRambeau 6 лет назад

Why would the video background option not be there? I have the other two. Just not the option to add a video.

@narayguy 6 лет назад

That’s weird indeed. Can you post a screenshot here? Thanks!

@pqf30 6 лет назад

I think the paid version has the video.My elementor doesn't have a video option.

@narayguy 6 лет назад

That's weird! I made this all in the free version. Hmm. Can you post a screenshot of where the video option should be here?

@ichibanto1 6 лет назад

Video option appears to have been removed in an update.

@bauer-aschaffenburg 5 лет назад

Both - with video background and fallback picture I had to first click into background color and it appeared *~*

@BobbyRamirez 6 лет назад

Do you have a video on added products to a website? Like t shirts with various sizes ?

@narayguy 6 лет назад

Yes of course! Have you seen any of our ecommerce website tutorials from 2015-2018?

@ahmadzaitoun4360 5 лет назад

how do i turn off the volume/music from the video?

@narayguy 5 лет назад

I think it’s off by default

@MarkPeeters2800 5 лет назад

Gregg, this works not on mobile devices ?

@narayguy 5 лет назад

They don’t have a video mobile background option yet :( just image. But you can add videos from RU-vid and set them to auto play. Just need some css and html skills

@MarkPeeters2800 5 лет назад

I was already afraid of that, I was searching for a background without the youtube bar and icons. Anyway tnx a lo @@narayguy

@camillepaige9146 5 лет назад

But how do we turn on the VOLUME for the background video? : (

@narayguy 5 лет назад

Haven’t gotten a solution from elementor yet :((

@camillepaige9146 5 лет назад

@@narayguy Thank you for replying

@narayguy 5 лет назад

@@camillepaige9146 of course! :)

@hiagonfabiano 5 лет назад

how do i do the background video auto play in mobile

@isabellegoncalves8727 5 лет назад

Can I put mp4 video on background ?

@narayguy 5 лет назад

Yes should work

@DianaVaras 5 лет назад

¡Gracias!

@narayguy 5 лет назад

Claro que si!

@siddumcs 5 лет назад

HI, HOW TO ENABLE BACKROUND VIDEO SOUND???

@narayguy 5 лет назад

No option I know of yet but you can always ask elementor

@pooowie87 5 лет назад

I wathched a other video about making a website and the guy explained the video sounds will automatically shut off. Did it not happen at your video?

@jonas8085 4 года назад

why is the video low quality?

@narayguy 4 года назад

Working on 4k this was a while ago

@jonas8085 4 года назад

Greg Narayan nooo the video on elementor bro😂

@skymakai 2 года назад

I can't for the life of me get the video to be behind the video. The newest version of Elementor is a little different.

@troybolton1674 5 лет назад

Hi Greg, I've used a stock video from RU-vid, How do I turn off the video title from background?

@narayguy 5 лет назад

It’s in those little elementor video settings. The tick boxes. They are super powerful

@sumukhhrr7403 5 лет назад

@@narayguy where do I find those settings? Unable to find

@StevenRodriguezcr 4 года назад

You cannot, RU-vid disabled this option.

@akshaydunakhe2735 5 лет назад

Will the video be visible on mobile devices?

@narayguy 5 лет назад

Elementor is fixing it...fallback image for now. But there are ways to put a background in a text editor and have it auto play...

@goldenlion8903 5 лет назад

I cant drag down heading to my video.Help!

@abhiramvmurthy6572 5 лет назад

please provide me the used oceanwp theme link...

@narayguy 5 лет назад

It’s just in Wordpress themes add new

@Saoj1981 5 лет назад

How did you make the video loop?

@indunilherath3834 4 года назад

good job !

@Jen18lol 6 лет назад

I don't have video option do i new a full version of elementor to get that?

@jakobesterbauer6058 5 лет назад

please tell me you found a solution... I have the same problem

@juliuskennethcastillo 6 лет назад

video background not working on mobile .. is there any way to fix it ?

@weswhalen9565 6 лет назад

Video backgrounds don't work on mobile. Usually you put a placeholder image so it loads on mobile while playing video on desktop.

@georgesmith3022 6 лет назад

all your videos are very good. i think you would have more subscribers if you produced more content

@marthaangeline1619 6 лет назад

you can do it all for free or is it only for pro ?

@narayguy 6 лет назад

Works for free, free elementor is amazing :)

@vineet5678 5 лет назад

can we embed any youtube video what about copyrights of video

@narayguy 5 лет назад

You should contact the creator to be sure, and link back to them on your credits page!

@sevethloco05 5 лет назад

Can this be done on a FREE PLAN or it only applies to a PAID PLAN?

@narayguy 5 лет назад

Free plan works

@sevethloco05 5 лет назад

@@narayguy I tried installing the Elementor Page and OceanWP but it requires me for a subscription. Where do I get this free Elementor page builder and the free OceanWP WordPress?