ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
How To Create a Full-Screen Video Slider Carousel in WordPress (Elementor + Ooohboi Steriods)
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Mentioned Resources:
► Elementor Pro
elementor.com/pricing/?ref=27691
► Siteground
www.siteground.com/index.htm?...
► Namecheap
namecheap.pxf.io/n1oazX
Contents:
0:00 Intro
0:16 Purchase Elementor Pro (optional)
0:36 Download plugins (Elementor + Ooohboi Steriods)
1:20 Step 1. Create a new page
1:50 Step 2. Create a new section
2:05 Step 3. Add columns (one column per video)
2:43 Step 4. Add inner sections into each column
3:30 Step 5. Add the videos (mp4) to each inner section
5:10 Step 6. Change section to full width + no gap
5:58 Step 7. Add a spacer to each inner section
6:36 Step 8. Activate Glider
7:20 Step 9. Glider settings + customization
8:05 Step 10. You're done! (+ some additional notes)
► Grab the free On-Page SEO Essentials Template
mentalitydesigns.com/on-page-...
► My social media
Instagram: / themarkboogie
Facebook: / themarkboogie
Twitter: / themarkboogie
LinkedIn: / markballiet
Some of the above links are affiliate links, which means that I earn a small commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make these videos without it.
![CAMPปลิ้น | EP.79[1/2] แก๊งไทบ้านพาบุกเมืองบั้งไฟโก้ ยโสธรรรร!!!](http://i.ytimg.com/vi/Ldr3_fvTEXk/mqdefault.jpg)
Thanks for the detailed tutorial. I was searching for a video slideshow on TH-cam, but those videos didn't solve my problem exactly. This video clarified everything clearly!
Nice tutorial Mark... simple and well explained...
Hi Mark, my Elementor doesn't show any video option in the Inner Sections. I have the latest free Elementor version. What can I do?
Hi Mark, Nice work. I'd like to implement this for my personal site howerver, how do you set this up in Elementor Pro 3.11. It does not use section but containers?
You're my hero. Exactly what I needed! Thanks for sharing
Glad it helped you out! I appreciate the kind words.
@@markballiet Really nice solution without any weird plugins. Thank you again!
Hey there, thanks so much for the video, but why does the sound not play on the video?
Hi Mark, thank you for this great solution. It works great on desktop, clips and headlines. However, on mobile navigation it sometimes shows the clips on full screen and sometimes the clip is showing small, full width, in the middle of the column with the headlines on top/bottom of the clip. Any idea how to solve it? Thanx
not responsive on small screens :( any idea please for video slider..and other issues like at the start when the page is loaded it is showings two seperate sections and after some time it starts showing slider
Hi Mark, Awesome tutorial! I have a problem at the end, when I try to create the lightbox, then I do not get it to work, it does not click and goes to the video that I put and I only get the slider. Is there somewhere I can find a video explaining this?
🔥🔥👍🏼 sick video
Thank you Jesus!
Hi i can't find sections to form columns. Only containers and now i';m trying to figure out ho to use them like this... any tips ??
Nevermind I got it. So pop three containers in a container and turn on Serroids Glider option.
thanks for the great content!
Thanks for the support Andrew! Much appreciated.
Wanna ask how it will go in responsive website..particularly mobile. it's not showing...
Thank you so much for this video! Very well explained and it is a simple tool used. I just have a little problem when I activate the header on glider. My header disappears and sits in the background of the carousel. Do you have an idea to fix this?
Hi Thomas - thanks for the kind words!
A couple questions:
1) Are you using the Hello Elementor theme?
2) What plugin are you using for the header/footer? "Elementor Header & Footer Builder?"
If you're using Hello Elementor that's great and I always use the Elementor Header & Footer Builder plugin for the footer/header.
I'd also try messing with the "Z-index" for the header and make sure it's on top/ a higher number than the carousel so it sits on top.
The z-index can be accessed by clicking on the section for the header and going to "advanced" in elementor.
awesome work
Thank you Saqib!
Hello! The tutorial is very well 🙏🏻 I have a question.
If i want write something and make it clickable, do I write inside of the column with a title or box text? and if I want this text appear with a animation, do I add a some entrance animation?
Thank you Carla!
Yes & yes. I used an icon box but I'm sure other widgets will work as well. You will probably just need to play with the margin/padding positioning.
Hey Mark! great tutorial man really loved this.
one question I have Is can you make a video on how we can a heading and text next to the video where the video is in the background with some opacity so that the heading and the text upon it can really pop out also how we can make this video clickable.
I would appreciate that also it help me a lot.
Thanks!
Does this still work with the new version and the flex box containers?
Hello, thanks for the video, I have a question about how I can put a description on the video and put a button that took me to another page of the web site. I saw that you put the icon box but when I update it does not appear even though I have already activated the "glinder" plugin. I want to do this in the videos that I placed. Thanks.
Hey Alejandra - what theme are you using? I'd make sure to be using the Hello Elementor theme. Also, you should check the z-index on the icon box to ensure it's above the other widgets.
Great video, thank you so much. Question: All 3 of my videos seem to play at the same time, meaning when it switches column, the other videos keep playing and u start mid-video. Do you have a fix for this?
Hi Leon - thanks for the kind words.
To answer your question, unfortunately, I believe that is just the nature of this setup. All of the videos play/start at the same time. If you figure out a way to resolve it though, please let me know!
Hi Mark ! Thanks a lot for this simple and elegant solution. Was wondering if there was any way to force each video to play from the start when you reach the corresponding slide. Right now they all seem to start playing at the same time, so you get a random frame when you get to the slide. Thanks again !
Hi Nathan - really appreciate the kind words. Great question but unfortunately I do not think this is possible with this method. If you do figure it out though, I'd love to hear how you did it.
What also like to have a solution to this problem.
@@mrksdsgn I don't think it's a "problem" per se, it's just the nature of setting up the video slider in this manner. It seems unavoidable since all of the videos/assets will load at once & loop.
Hey Mark, thanks for this video. In my case videos goes white and I need to click on slide in onther to bring video back :/ Any idea how to fix this?
Hey archiwum - I'm sorry you're having issues. Are you using the Hello Elementor theme?
I've noticed a lot of people having issues with this method aren't using Hello Elementor.
Thanks for all the help, but how do I get glider to stop playing with it gets to the last slide?
I'm looking at the settings now and I actually don't see an option to stop the infinite loop.
Marvelous.
Hi Al - really appreciate the kind words and taking time to comment. Cheers!
you save me, thanks
Happy to hear it Marcos!
Hi Mark, unfortunately it's not working properly! I have 4 Videos (each 2 MB) and sometimes it is working... sometimes 1 or 2 videos not... and sometimes one of the four videos has a other aspect ratio than the others... sometimes all videos are showing, but when the carousel begins again from slide 1, the first Video are not showing... all in all it's too buggy!!! I have the latest Version of the Hello Theme and also latest version of Elemtentor Pro. I hope you can help me out with these issues.
Hi ,thanks for this tutorial, I would like to know how to make a transparent header on the video. Thanks
Hi Miki - you can do this using the plugin "Header and Footer Builder for Elementor." Use negative top margin. I'm sure there are a bunch of free tutorials out there. Let me know if you have any issues.
@@markballiet I've found a tuto ,thanks a lot..🙏
Hello Mark, thank you very much for the information you shared, I have a question, because this video does not show on the phone, no matter how it opens on the phone.
I will be glad if you can help
ı am using aster
hi, i wanna ask if how i can get rid of the columns showing first before the slides
Hi Stacy - I don't totally understand your question. What do you mean? Do you have a URL link to your issue?
Hi, great tuto. I've got an issue, I dit all the tutorial but at the end, how can I put back the header, the menu... ? Thanks
Thanks, Tanguy. I use the plugin "elementor header & footer builder" for the header/nav menu.
For this specific project, I created a transparent header with negative margin so it didn't take away from the full-screen video slider.
@@markballiet how do I know how much margin I need to add?
Its not working when opening in mobile
Thanks for t video, but is not working now [UPDATE] 2 min after I pull F5 in the page, and magicaly was working... uugg
Mobile not working for me either. I'm using Elementor Pro version 3.7.1 and OoohBoi Steroids for Elementor version 1.9.6. Do you know what I can do to make it work on mobile?
Hey RC - sorry to hear you're having issues. Are you using the Hello Elementor theme?
@@markballiet I am also having a problem with mobile not working. I am using OceanWP as a theme. Is it only compatible with the Hello Elementor theme?
EDIT: Nevermind - I got it to work. Had to enable it for each inner section.
Other problem though is that the video on mobile is cut off on the left and right side. Is there a way to fix that?
@@mrksdsgn Hey - I'm glad you were able to get it to work.
When I work with Elementor, I only use Hello Elementor so I can't tell you exactly how to fix your issue with the cut off video. I haven't had that issue with Hello Elementor. Is it because the screen is much more narrow on mobile vs desktop?
Great video thanks
Can u do the full video for filmmaker website
We’ll be awesome
Really appreciate the kind words Nicholas!
Can you explain more about what you're looking for? A complete video from start to finish putting together a filmmaker portfolio website or something specific?
@@markballiet can t find the plugin OooBoi Steroids for elementor....
@@Nicolas_Fradet_NFD Here's the direct link.
wordpress.org/plugins/ooohboi-steroids-for-elementor/
Hi Mark! awesome tutorial, but i have a problem: In the mode "mobile" the videos dont show to me. How can i to solve this problem?
By the way: I'm using the Hello Theme!
you need just turn the options in layerstyle
Mobile version not working. What do I do?
Hey Mahady - are you using Hello Elementor theme? What version of Wordpress?
mobile view is not working.
Hey - are you using Hello Elementor theme? Mobile works fine for me, I’ve applied this method to a live site for a client.
Mobile not working for me either.
It probably has something to do with the version of Hello Elementor.
I just checked my client site and it's still working on mobile but the website is still running Hello Elementor 2.4.1 along with Elementor Pro 3.2.2.
Are you running the most updated versions of Hello Elementor & Elementor Pro?
Its not working
Hey - Premchand. Sorry to hear you're having issues.
Are you using the Hello Elementor theme?
No,I'm using the twenty twenty theme.
@@premchandhuidrom6314 I would recommend using Hello Elementor. It doesn't seem like this method works with other themes.