Jumbotron header video not showing on mobile

Hi,

I have added a video to the jumbotron but this only displays on the desktop version. Tablet and mobile devices only get a background colour instead. How do I get the video to show on mobile please?

This is the CSS I’ve tried to force it to work:

@media only screen and (max-width: 600px) {
.illdy-jumbotron-background #wp-custom-header iframe, .illdy-jumbotron-background #wp-custom-header video {
opacity: 0.6;
width: 100%;
display: block;
}}

Thanks for any help provided! :slight_smile:

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
please provide url and i will take a look

Hi Noda!

Many thanks for your reply. I’m so sorry, I thought I sent a reply to you the same day but just checked back and I see it didn’t send to you.

The URL is: dev.goddardfabrication.com.

Many thanks for your help on this.

Best regards

Hey there

Thank you for coming back :slight_smile:
hm, can you show me a screenshot? i can clearly see video on my mobile phone, there is no any problem with it

Hi Noda,
Ah i see ok. Well on my mobile, the mobile version shows the view as the attachment shows. If I switch to desktop version then I see the video no problem. Need to see it in the mobile version too. I’m using mobile Chrome to view it.

Many thanks for any help you can provide.

Good morning

hm, video is still appearing for me, can you try to use youtube video instead of hosting one? just for testing

Good morning,
I see, how strange. Have tested with multiple devices and they all have this issue.
I believe I tried youtube hosting but think it had same issue. I will change back to youtube version and let you know result.

Many thanks

Hi Noda,
I’ve removed the embedded video and added the youtube link instead. After publishing and testing, the results are the same unfortunately. I have tested on an android phone and tablet and also on an iPhone and they are all the same, none show the video, only if i change to desktop version do I then see the video.

Please investigate further

Many thanks

Hi Noda,

Haven’t heard back, just thought I’d message to see if you have a solution for this please?

Many thanks

Hey there

IM sorry but video is still showing for me, i can’t see any problem here, i tried it from phone and from several browsers everywhere video is working for me :frowning:

Thanks for your reply Noda.
Ok, please confirm that you are definitely viewing the mobile version of the website and not in desktop view. In desktop view it will show on every device. It’s the mobile version that has the problem. Also, please confirm what devices you have tested on. I have used iphone, ipad, android phone and android tablet and all have the same issue when viewing the mobile version.

I am desperate to find a solution to this for my client and really need your help please.

Many thanks Noda

Hey there

Device i used it Lenovo Vibe Z2 Pro
muppetbam my suggestion is to use third-party plugins in this case, try to find slider plugin with image feature, or just a video slider plugin and place it as on top, to be honest, i saw some others also complaining about a similar problem but there was no chance to catch cause of this problem in some devices it worked and in some devices not

Oh i see hmmm ok thanks for the advice, I will try a plugin and see what happens. So annoying that it’s a per-device thing, so hard to work universally these days.

Thanks again Noda

Sorry once again and let me know if you need anything else

Personally, since a jumbotron is a Bootstrap element in general, I recommend you assign a class or id to the element in question, rather than changing the global jumbotron rules themselves.

Hannell632, many thanks for your reply. I hadn’t thought of that ?. I will check the code and add one if it is missing. Many thanks for your input ??