Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
  • #781866

    Hi!! I found this in another thread, however I do not understand how to make the video show on the slider on mobile phones from what’s on this tutorial.

    Due to compatibility issues, videos in sliders are disabled on mobile. However you can refer to this post – and add video element to your page and only display it on mobile

    Best regards,

    Thank you!!


    Hey Intell,
    In this method you would place a video element under your slider element and the css would hide the video on all devices but mobile, and the css would show the slider on every device but mobile. If you would like to try this, then build the page and include your url for us to examine.
    Note that auto play does not work on mobile

    Best regards,

    • This reply was modified 3 years, 6 months ago by  Mike.

    Thanks Mike,

    I still need help on this.

    I added this:

    “Turn on Custom CSS Class field for all ALB Elements

    December 3, 2013/in CSS Snippets, PHP Snippets /by Devin/Last Updated: April 9, 2014
    Once enabled, the following function adds a new field to each of your Advanced Layout Builder element’s pop up menu.

    First Add this line of PHP to your functions.php file so that the custom class field is enabled:”


    In the full width easy slider I added this @media only screen and (min-width: 990px) { .only-mobile { display: none !important; }}

    In the video, I added this @media only screen and (max-width: 990px) { .only-desktop { display: none !important; }}

    Nothing changed. Thanks for your help on this.

    I have been wanting to have more mobile friendly images, etc. for a long time. This will be great once I learn how to do it!


    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
    #full_slider_1 { display: none !important; }}
    @media only screen and (min-width: 768px) { 
    #after_full_slider_1 { display: none !important; }}

    Tablet, Laptop, Desktop:
    Please clear your cache :)

    Best regards,


    That did nothing for me.

    The only thing that comes up on mobile is the backup mobile image.

    Really hoping to get this working properly soon.




    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,


    Hi Andy,

    I provided all the info, login details to everything already in my original post.

    Can you not see it?

    It’s not easy for me to get that to you again.

    I found it – in my reply.

    • This reply was modified 3 years, 5 months ago by  Intell.


    You forgot to add the video element in the page and the custom css class attribute of the slider is invalid. We edited the page and the Quick CSS modifications. (see private field)

    Best regards,


    Thank you!

    I got everything to work on the real site, BUT now I have a gap on my page below the video on desktop & above on the mobile.

    Can you help?

    All of you are the BEST!

    • This reply was modified 3 years, 4 months ago by  Intell.

    sorry, I was unable to login, please check :)

    Best regards,


    Thanks for trying!!

    Looks like I made a boo boo.

    See below



    Thank you for the update.

    We moved the video inside a color section. Please remove browser cache or hard refresh before checking the page.

    Best regards,

    This reply has been marked as private.

    Hi soth3d,

    Could you try updating the theme to the latest version (4.1.2) to see if that helps please?

    Best regards,

    This reply has been marked as private.


    Thank you for the info.

    Please note that videos inside the slider are not supported on mobile devices. You have to add a fallback image or display an actual video element. Use the Screen Options panel to toggle the elements’ display properties. This feature is available on version 4.1.

    Best regards,

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.