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!
Hi there
Hope you are having a good day and thank you for your question
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
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
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 ??