Background Video Hides in Mobile View

Hi,

I have a little issue with the homepage of my website. I’ve added a Youtube video link as a background and it’s working fine on a computer and laptop. But as soon as I reach below 768px the background video automatically hides. I checked in the inspect it has a hidden class applied when I reached below 768px.

This is the exact class that is used in the section: vc_hidden-xs

I also checked the custom CSS in the additional CSS section of the theme but found nothing.

I’m attaching some screenshots of the full view and mobile view and also sharing a link to the homepage I’m working on.

Laptop View: https://ibb.co/6n7bBW5
Mobile View: https://ibb.co/dJmz3hV

Website URL: https://parthparikh.com/main-page-for-harmeet-2-by-gufran/

Thank You.
Regards,

Hello,

Yes, usually video background disappears on mobile due to its nature.

You need to set an image on mobile instead of video. You see, the image is cut or adjusted on mobile and video cannot be adjusted on mobile.

If you have any questions please feel free to contact us.

Best Regards

Hi,
Thank you for your reply.

I understand the situation. But is there any way we can use a video in mobile view too?
That’s the client’s requirement.

We are using a YouTube video URL to fetch video to the background. I tried using shorts (Vertical Video Format) and hide the section on computer and laptop view and only visible in Tablet and Mobile view in order to check if they fit the background but it hides anyway.

I’m sure you will give me a solution to our issue.

Regards,

Hello,

Please, provide us with your admin access so we can log in and check this on your side.

Thank you in advance.

Hi,

We are moving with a slider for the hero section instead of the video. Slider will work on mobile even if there’s a video.
Thank you for your assistance.

I have another issue. I need to change the logo in mobile view. In the desktop view, the logo is white and when I test it in the mobile view it changes to black. The color of the navbar is set to black so we can’t see the logo.

The navbar is transparent when you open the URL. It’ll turn black when you scroll. In mobile view, when the background of the navbar turns black, the logo is also black and we can’t see that.
(Please check the screenshot or URL I’ll leave below.)

There must be some settings in the theme, right? Please help me find that.

Desktop View: https://ibb.co/LZrBnkj
Desktop View (On Scroll): https://ibb.co/xMSbV30

Mobile View: https://ibb.co/t3HDD4j
Mobile View (On Scroll): https://ibb.co/XCt0Ddk

Websit URL: https://parthparikh.com/main-page-for-harmeet-2-by-gufran/

Thank You.
Regards,

Hello,

You need to select your logo image for the mobile header as shown on the screenshot https://monosnap.com/file/4tdbBQtkqWyCYFl9HJjQxDv0uCIl11

Kind Regards

Hi,

Can you please assist me with the following steps?
Where do I need to go or what do I need to search in the theme setting to select the image?

Thank you,
Regards,

Hello,

You need to go to Dashboard -> Header builder -> Edit current header and upload your logo image as described in our documentation https://xtemos.com/docs-topic/how-to-setup-a-logo-image/

Kind Regards

[Author]

Posts