Video Background in Elementor and Ocean WP
Vložit
- čas přidán 5. 09. 2024
- 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 CZcamsr 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
Thanks so much Greg! You saved me after I passed through quite a bit of grief not finding the way that would ACTUALLY WORK!
Watching in 2020 best guidance ever thank you.
Yay!
As usual fantastic video! Thanks Greg.
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.
Really awesome video Greg! Love the video background idea! Very helpful!
Thanks Cori! Becoming obsessed with Elementor here!
I agree, short and to the point, complete and accurate explanation. This is something I definitely want to do, so many thanks!
Your videos are so smooth and nice to watch!
Thank you for a very quick and simple tutorial. Subscribed.
Great tutorial freind but i wonder does this content slow the page loading as your using video?
Hi sir，any way to remove the white line down the menu to make it more universal looking？
You're awesome!!!!!!!
Thanks you too!!
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.
Thanks for the tutorial, all I needed was to replace the video with an image!
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.
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
Ah ok, maybe low file size or width and height?
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?
Just loading probably
You saved my life, man!
hi greg thanks a lot great tutorial just one thing is it possible to maintain the audio of the video in background?
Elementor has yet to do that one, apologies
Hi I did it, worked on desktop but didnt work on mobile. How can i solve this?
Thanks for the tutorial. Is there a way to do this without Elementor, or rather with something FREE?
Use elementor free version!
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?
Should be a setting in elementor to remove the video player details or controls
Thank you!
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?
Were you able to solve the white line on the header part
Hehe yeah lots of commenters hooked it up
Can you tell me how to play it with sound ?
Anyway to have the audio play in the background video? I'm using WordPress Ocean WP.
My original CZcams video has audio, but when I use it on my WordPress website it has no audio.
Why does it shows the video info when starting and ending to play?
You can remove that with free elementor settings :)
Greg Narayan where?
I'm listening to a few of you videos. I lost the edit with elementor in the top bar!
So glad!! Update elementor and if that doesn't work, disable plugins, could be a plugin conflict causing elementor top bar removal :)
How do you remove the white line on the header that shows on the video?
I think we have some nice commenters answering that below :)
Would be nice if you would remove that ugly line under the menu too.
Right it’s a setting in Wordpress customize
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.
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...
How did you make the video loop? and how did you get rid of the youtube labels, controls, and etc?
did you figure out?
@@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 :)
@@grandma8403 damn thats long time ago, im professional wp developer right now 😂
@@jonas8085 oh LMAOO good for you though! ive still got a long way to go
Hi how to add the sound of the background video? Thx
Still working on it
Great thanks. Can you give a hint to where you have found the video you used in this video?
Haha yes. Hint: bottom off the free elementor page templates, be a hero :)
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
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!!
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.
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.
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 CZcams but it already downloaded from another website and it's on my pc now.. Si what should I do
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
Really thanks ❤️
Thanks for the help but can i use this with any wp theme or only ocean wp?
Hey man thanks for the tut. Quick question how do I add padding to the left and right of the video?
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.
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?
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?
I have exactly the same!
Thanks for the tutorial! Is it possible to replace the video with an image if it's in mobile mode? TIA
hi, of course : use a fallback image as told in the video at 10:56 ;)
Sound does not work :(
I got really bad score using video background in section due to javascript parsing.. how to avoid this?
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.
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
hello ! How do we avoid heavy loading times with video background like theses ? Thank you :)
use a fallback image as told in the video at 10:56
Always outstanding! Thank you so much!
Yvw! :) Great to hear from you Maria! Hows the blog goin these days?
But how do you make it work on the mobile version ?
They done have mobile video option yet :(
when I do it on the right side it the image overlays the text anyone knows how?
Send screenshots?
Hello, how to delete the CZcams channel name and the video name in the CZcams video background
Hi! Should be some advanced settings in elementor for that, I’ve seen the toggles in there
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.
You can insert some text below and then give it negative margin to raise it up in the screen
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
What happens if i wanna use a video that i already have in my computer ? How could i do it ?
You can upload the mp4 file into Wordpress :)
@@narayguy thank you very much
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!
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/
Thanks!
When I do the background through CZcams 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
good job !
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
Does it work on iphone?
my elementor is fre version , it not have video botton like u say at 2.04 back groud video , how I do ?
¡Gracias!
Claro que si!
It shows the CZcams title and other options. How to overcome this?
There's allll these little checkboxes in Elementor underneath the video background. There work wonders, autoplay etc
@@narayguy the options are not there for a background video, what you are saying is for the video element.
ah you're right my fault. try to specific start and end time. please post link and i'll check it out
Did anyone fix this issue yet? Having the same trouble
I am also having this issue...
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 ?
how come when I create a new page there is no content layout boxes with options? it's just blank
Install classic editor plugin? Yes elementor pages are blank tho...
do you know why it shows up as slideshow (not video) for me on the background? under edit column?
Can you send me a screenshot to greg@dearblogger.org I’m not quite sure why
all your videos are very good. i think you would have more subscribers if you produced more content
I got the video background to work but the video is mute. How do you get it to ply its sound too?
Try the section settings, usually you want people to press play tho
@@narayguy okay thank you sir.
Thx Greg! How can I delete the white line below the menu?
Oh that line is the worst! It’s in customize, header settings just a checkbox option or along those lines :)
@@narayguy thank you!
@@narayguy Is it possible to change the color of the header on different pages? white header on a black background and vice versa.
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??
No you don’t need pro! It’s maybe just moved a few settings away
HI, greg.. why mine is it not mobile friendly? the video doesnt play on background when using my phone... can i know why?
why the sound from the video doesn't come out? please reply
Just a standard setting unfortunately. There are ways to autoplay videos with sound tho, using custom CZcams links
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! :)
Great video. I'm searching on how to have full screen video with sound in elementor pro with Ocean wp? any suggestions?
I’ll ask Elementor! Google doesn’t seem to know how
I did it but not able to with it being the background
2.05 how come on mine it did not have the option for the video. It had the first two.
How can I center the video? For me it allways start from the "right side". Thanks for the tutorial! :)
dont u have troubles with copyright when u use videos from youtube?
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) - CZcams link or video file (mp4 is reommended) - so how to add the file? Thx in advance
Do you have a video on added products to a website? Like t shirts with various sizes ?
Yes of course! Have you seen any of our ecommerce website tutorials from 2015-2018?
Oh Damn, 2:01 into your video, I only have "classic, gradient, and SLIDESHOW"... probably got updated and changed?
yup
how do i turn off the volume/music from the video?
I think it’s off by default
@Greg Narayan hey man but when i go on mobile its not showing the video :(
Hi there! Is this tutorial still working sept 2021?
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
Wow that’s cool! I hadn’t heard of sound working. Onetone always played background videos with sounds, or just normal videos?
Greg Narayan so with Onetone (previous version without elementor) I had the sound and an option to mute it (in customize)
There is no option to have the sound with Elementor?
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!
Any way to add audio?
Why would the video background option not be there? I have the other two. Just not the option to add a video.
That’s weird indeed. Can you post a screenshot here? Thanks!
I think the paid version has the video.My elementor doesn't have a video option.
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?
Video option appears to have been removed in an update.
Both - with video background and fallback picture I had to first click into background color and it appeared *~*
why is the video low quality?
Working on 4k this was a while ago
Greg Narayan nooo the video on elementor bro😂
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.
But how do we turn on the VOLUME for the background video? : (
Haven’t gotten a solution from elementor yet :((
@@narayguy Thank you for replying
@@camillepaige9146 of course! :)
how do i do the background video auto play in mobile
Gregg, this works not on mobile devices ?
They don’t have a video mobile background option yet :( just image. But you can add videos from CZcams and set them to auto play. Just need some css and html skills
I was already afraid of that, I was searching for a background without the youtube bar and icons. Anyway tnx a lo @@narayguy
I cant drag down heading to my video.Help!
HI, HOW TO ENABLE BACKROUND VIDEO SOUND???
No option I know of yet but you can always ask elementor
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?
Hi Greg, I've used a stock video from CZcams, How do I turn off the video title from background?
It’s in those little elementor video settings. The tick boxes. They are super powerful
@@narayguy where do I find those settings? Unable to find
You cannot, CZcams disabled this option.
how can i get this theme
Will the video be visible on mobile devices?
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...
How did you make the video loop?
Can I put mp4 video on background ?
Yes should work
video background not working on mobile .. is there any way to fix it ?
Video backgrounds don't work on mobile. Usually you put a placeholder image so it loads on mobile while playing video on desktop.
I don't have video option do i new a full version of elementor to get that?
please tell me you found a solution...
I have the same problem
please provide me the used oceanwp theme link...
It’s just in Wordpress themes add new
you can do it all for free or is it only for pro ?
Works for free, free elementor is amazing :)
can we embed any youtube video what about copyrights of video
You should contact the creator to be sure, and link back to them on your credits page!
No more video option in 2020 version.