Hi! I have a video on this page http://shootit.se/fotograf-i-orebro
MP4-file uploaded in Wordpress. It works on desktop and I can see it in mobile preview in the Pro editor as well, but it does not show on my iPhone 11 Pro.
The header is based on the KESCLIN MCKESCLIN template.
Any ideas?
Also, where do I edit the effect of this button? I want it visible all the time and not disappear or be hidden by default.
Third question: I can’t see the “hide during breakpoints” options for my sections anywhere. How can I control the sections that I only want visible based on screen width?
Hello @markusp80,
Thanks for writing in! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.
1.) Your video plays on Safari browser and my android phone.
This could just be a caching issue. Please clear all your plugin caches and your iPhone’s browser cache or use private browsing mode to test the site again.
2.) The columns have a custom class interactive-column. As soon as your hover over the button, it shows up because it is using this custom CSS:
.interactive-column:hover .cta-btn {
opacity: 1;
transform: translateY(0);
}
.interactive-column .cta-btn {
opacity: 0;
transform: translateY(-40px);
}
You can remove the either remove the class or custom CSS so that the button will always be visible.
3.) To know how you can show or hide elements in different screen breakpoints, kindly check out this documentation:
We would love to know if this has worked for you. Thank you.
Hi!
Thanks for the info, I found the customize-button for each element.
But the video is still not visible after emptying cache and trying in incognito mode. I have tried Safari and also tried Chrome on my iPhone but the videostill not visible. I restarted my phone but still the same. Any ideas?
Hello @markusp80,
Can you please add a poster image next to the background video?
It could be that your iPhone browser automatically stops and remove the video from playing. This is a default in browser settings so the Poster Image should be visible instead.
Kindly let us know how it goes.
Hey @markusp80,
The video background is disabled on mobile devices because there isn’t a clean way to make that happen. That is also why there is a Poster Image option.
If you wish to play the video even on mobile, you need to consult with a developer to create a custom function for you.
Thank you for understanding.
Hi! Ok, that’s too bad. But it seems like it’s only on iOS then, not Android? Because it worked for your colleague on his Android phone as you can see in the post above.
Hey @markusp80,
Thanks for highlighting that. I checked on my Android phone and it looks like it supports the Video Background now so it’s playing on Android.
It still won’t work in iOS whether Safari or Chrome. iOS doesn’t support it even in iPhone 11.
Thanks.
Yea that’s too bad.
Anyways, another detail while still on the video topic. Is there a way to always keep the ratio of the video to 16:9? That’s the width and height ratio of the video, and I would like it to always keep that regardless of the screen width (on desktop, where the video is shown). Is that possible?
Hey @markusp80,
Yes. Your Bar’s Top padding must be a percentage value (exactly 56.25% for a 16:9 ratio) and for simplicity, keep the rest of the paddings to 0.
Hope that helps.
Thanks! Now the entire video shows.
Out of curiosity, what do these padding settings mean, that was there from the header template I used from design cloud?
Top: calc(20rem + 5vw + 35px)
Bottom: calc(11rem + 5vw + 35px)
Hello @markusp80,
The Kesclin McKesclin template has a padding of calc(50px + 15vw) 5vw calc(50px + 7.5vw) 5vw; which means that the top padding is 50 pixels plus 15% of the width of the viewport. For more details about the different units, you can check this out: https://www.w3schools.com/cssref/css_units.asp
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
