How To Create a Full-Screen Video Slider Carousel in WordPress (Elementor + Ooohboi Steriods)

Поділитися
Вставка
  • Опубліковано 21 жов 2024

КОМЕНТАРІ • 76

  • @gellisrikar
    @gellisrikar 6 місяців тому

    Thanks for the detailed tutorial. I was searching for a video slideshow on UA-cam, but those videos didn't solve my problem exactly. This video clarified everything clearly!

  • @alicjamichalik
    @alicjamichalik 2 роки тому +2

    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?

  • @guntimusic
    @guntimusic 2 роки тому +1

    You're my hero. Exactly what I needed! Thanks for sharing

    • @markballiet
      @markballiet  2 роки тому +1

      Glad it helped you out! I appreciate the kind words.

    • @guntimusic
      @guntimusic 2 роки тому

      @@markballiet Really nice solution without any weird plugins. Thank you again!

  • @pixeneodigital
    @pixeneodigital Рік тому

    Nice tutorial Mark... simple and well explained...

  • @nimrod1244
    @nimrod1244 Рік тому +1

    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

  • @BENJCOTE
    @BENJCOTE Рік тому +1

    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?

  • @jesuszarate3790
    @jesuszarate3790 2 роки тому +2

    🔥🔥👍🏼 sick video

  • @saqibgilani886
    @saqibgilani886 2 роки тому +1

    awesome work

  • @thomasbijelic6719
    @thomasbijelic6719 2 роки тому +1

    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?

    • @markballiet
      @markballiet  2 роки тому

      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.

  • @rototank
    @rototank 10 місяців тому

    Hey there, thanks so much for the video, but why does the sound not play on the video?

  • @tercihsenin6157
    @tercihsenin6157 2 роки тому

    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.

  • @carlayamin
    @carlayamin 2 роки тому +1

    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?

    • @markballiet
      @markballiet  2 роки тому

      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.

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 2 роки тому +2

    thanks for the great content!

    • @markballiet
      @markballiet  2 роки тому +1

      Thanks for the support Andrew! Much appreciated.

  • @Moddance19
    @Moddance19 8 місяців тому

    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.

  • @Vugtoc
    @Vugtoc 2 роки тому +1

    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?

    • @markballiet
      @markballiet  2 роки тому +1

      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!

  • @Scrollwithmayank
    @Scrollwithmayank Рік тому

    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!

  • @Qamil323
    @Qamil323 2 роки тому +1

    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?

    • @markballiet
      @markballiet  2 роки тому

      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.

  • @themidstream
    @themidstream 2 роки тому +1

    Marvelous.

    • @markballiet
      @markballiet  2 роки тому

      Hi Al - really appreciate the kind words and taking time to comment. Cheers!

  • @alejandratriujeque4502
    @alejandratriujeque4502 2 роки тому +1

    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.

    • @markballiet
      @markballiet  2 роки тому

      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.

  • @iCtrlZDesign
    @iCtrlZDesign 2 роки тому

    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?

  • @marcosantos1895
    @marcosantos1895 2 роки тому +1

    you save me, thanks

  • @usamagilani2494
    @usamagilani2494 7 місяців тому

    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

  • @pixeneodigital
    @pixeneodigital Рік тому

    Wanna ask how it will go in responsive website..particularly mobile. it's not showing...

  • @Inurublij
    @Inurublij 2 роки тому +1

    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 !

    • @markballiet
      @markballiet  2 роки тому +1

      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.

    • @mrksdsgn
      @mrksdsgn 2 роки тому

      What also like to have a solution to this problem.

    • @markballiet
      @markballiet  2 роки тому

      @@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.

  • @JP-jf6bt
    @JP-jf6bt Рік тому

    Does this still work with the new version and the flex box containers?

  • @Miki-bi1rj
    @Miki-bi1rj 2 роки тому +1

    Hi ,thanks for this tutorial, I would like to know how to make a transparent header on the video. Thanks

    • @markballiet
      @markballiet  2 роки тому

      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.

    • @Miki-bi1rj
      @Miki-bi1rj 2 роки тому +1

      @@markballiet I've found a tuto ,thanks a lot..🙏

  • @rcdigital6473
    @rcdigital6473 2 роки тому +1

    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?

    • @markballiet
      @markballiet  2 роки тому

      Hey RC - sorry to hear you're having issues. Are you using the Hello Elementor theme?

    • @mrksdsgn
      @mrksdsgn 2 роки тому

      @@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?

    • @markballiet
      @markballiet  2 роки тому

      @@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?

  • @designkanone6916
    @designkanone6916 2 роки тому

    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.

  • @rcobr4
    @rcobr4 2 роки тому

    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?

    • @rcobr4
      @rcobr4 2 роки тому

      By the way: I'm using the Hello Theme!

    • @SmileggNatoo
      @SmileggNatoo Рік тому

      you need just turn the options in layerstyle

  • @tanguymarchetti5469
    @tanguymarchetti5469 2 роки тому

    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

    • @markballiet
      @markballiet  2 роки тому

      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.

    • @mischa_lorenz
      @mischa_lorenz Рік тому

      @@markballiet how do I know how much margin I need to add?

  • @KaribbeanTire1
    @KaribbeanTire1 2 роки тому

    Thanks for all the help, but how do I get glider to stop playing with it gets to the last slide?

    • @markballiet
      @markballiet  2 роки тому

      I'm looking at the settings now and I actually don't see an option to stop the infinite loop.

  • @abdullahsalman2175
    @abdullahsalman2175 2 роки тому

    Its not working when opening in mobile

  • @eufernandobocutti
    @eufernandobocutti 10 місяців тому

    Thanks for t video, but is not working now [UPDATE] 2 min after I pull F5 in the page, and magicaly was working... uugg

  • @stacycanencia5014
    @stacycanencia5014 2 роки тому

    hi, i wanna ask if how i can get rid of the columns showing first before the slides

    • @markballiet
      @markballiet  2 роки тому

      Hi Stacy - I don't totally understand your question. What do you mean? Do you have a URL link to your issue?

  • @Nicolas_Fradet_NFD
    @Nicolas_Fradet_NFD 2 роки тому +1

    Great video thanks
    Can u do the full video for filmmaker website
    We’ll be awesome

    • @markballiet
      @markballiet  2 роки тому

      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?

    • @Nicolas_Fradet_NFD
      @Nicolas_Fradet_NFD 2 роки тому

      @@markballiet can t find the plugin OooBoi Steroids for elementor....

    • @markballiet
      @markballiet  2 роки тому

      @@Nicolas_Fradet_NFD Here's the direct link.
      wordpress.org/plugins/ooohboi-steroids-for-elementor/

  • @mahadyjuwel2214
    @mahadyjuwel2214 2 роки тому

    Mobile version not working. What do I do?

    • @markballiet
      @markballiet  2 роки тому

      Hey Mahady - are you using Hello Elementor theme? What version of Wordpress?

  • @premchandhuidrom6314
    @premchandhuidrom6314 2 роки тому +1

    Its not working

    • @markballiet
      @markballiet  2 роки тому

      Hey - Premchand. Sorry to hear you're having issues.
      Are you using the Hello Elementor theme?

    • @premchandhuidrom6314
      @premchandhuidrom6314 2 роки тому +1

      No,I'm using the twenty twenty theme.

    • @markballiet
      @markballiet  2 роки тому

      @@premchandhuidrom6314 I would recommend using Hello Elementor. It doesn't seem like this method works with other themes.

  • @sketchfreestyle1423
    @sketchfreestyle1423 2 роки тому

    mobile view is not working.

    • @markballiet
      @markballiet  2 роки тому

      Hey - are you using Hello Elementor theme? Mobile works fine for me, I’ve applied this method to a live site for a client.

  • @KaribbeanTire1
    @KaribbeanTire1 2 роки тому

    Mobile not working for me either.

    • @markballiet
      @markballiet  2 роки тому

      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?