Background video not working on mobile, no fallback background image

  • The background video doesn’t work on mobile and there is no option to put a Background Fallback image on Oceanwp template.

    I used this code in the additional css and it still doesn’t work-

    `@media (max-width: 1024px) and (min-width: 768px) {
    .elementor-hidden-tablet {
    display: block;
    }
    }

    @media (max-width: 767px) {
    .elementor-hidden-phone {
    display: block;
    }
    }`

    Please help!

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hello,

    Can you share site link so that I can check it? If you are using the Elementor to add video background, then you will see the option for uploading a fallback image on the same panel. Can you point me exactly where are you trying to upload the video?

    Thread Starter colenot

    (@colenot)

    Hi, nevermind. I somehow figured it out. I had the Hero Video Headline in the top position. I figured that I would move the second positioned block (Hero image with text) to the top, dropping the Hero Video to 2nd position. Once I did that, the Background Fallback miraculously appeared. After I added that image, I then reversed the positioning of that block to the top again and now I can see the fallback image on mobile, but I can’t see the video header on mobile after adding that updated CSS code.

    Thread Starter colenot

    (@colenot)

    Anyone have success making this code work so video header works on mobile?

    `@media (max-width: 1024px) and (min-width: 768px) {
    .elementor-hidden-tablet {
    display: block;
    }
    }

    @media (max-width: 767px) {
    .elementor-hidden-phone {
    display: block;
    }
    }`

    If possible please share your site link so that I can give you the correct code to display it. The above code should work. Try with !important and check it works or not. 

    @media (max-width: 1024px) and (min-width: 768px) {
.elementor-hidden-tablet {
display: block !important;
}
}

@media (max-width: 767px) {
.elementor-hidden-phone {
display: block !important;
}
}
    Thread Starter colenot

    (@colenot)

    The code you just posted works now! Thanks for your help!

    Thread Starter colenot

    (@colenot)

    One thing, for some reason, on apple products (iphone and ipad), the video doesn’t work.

    Since it is the feature of Elementor. Can you try to contact Elementor Support for this?

    Hi there,

    I’m using OceanWP theme and Elementor (basic) to build my website, and I used background video for my header. However, the video was showing only on homepage, and in other page it has a transparent white/grey (fallback picture I guess). I would like the video shows on every single page that I created (About us, strategy, etc.). Please help me out. Thank you so much in advance.

    The page I need help with: https://www.vinhquangco.com

    Hello,

    Try to disable/enable the plugins one by one to check for a possible conflict. Is it working with other themes such as twenty nineteen theme?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Background video not working on mobile, no fallback background image’ is closed to new replies.