-
Posts
-
When I look at any video in my Enfold website on my iPhone, I see the familiar Enfold round play button, but overlaid over that and slightly offset to the bottom, is iOS’s own semitransparent round play button. This double, overlapping interface looks very sloppy. Is there an easy way to get rid of the Enfold play button while on iOS?
Thanks in advance
Hi,
Can you give us a link to your website? You can use Media Queries to remove the play button overlay when viewing on iPad or iPhone.
@media only screen and (max-width: 767px) {
.image-overlay.overlay-type-video {
display: none !important;
}
}Add the code on your custom.css or Quick CSS
Regards,
Ismael
Thanks Ismael,
I’ve added the ccs code you suggest to the custom.css file. It seems to have done the trick on iPad, but not on iPhone.
The page I’m viewing is http://www.wrks.nl/Rene/portfolio-item/officieren/
The whole website is (for now) located at http://www.wrks.nl/Rene/
Not sure whether iPad had the problem to begin with, though.
I think what I’m seeing here is still the Enfold play button.
The double button issue is on IPhone.
/* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */
/* General Custom CSS */
/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */
@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */
}
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
.image-overlay.overlay-type-video {
display: none !important;
}
Hi ReneBrouwer,
I can’t imagine something like that slipping by Kriesi as he tests on all iOS devices. What version of phone and OS is it specifically? I’ll tag the topic for Kriesi as he is the only iPhone user but any additional information will help him diagnose the issue.
Regards,
Devin
Hi Devin,
I was a bit amazed as well, I would expect this to be pretty basic…
Has he (or anyone) even looked at the page I’ve -reluctantly- made available to this public forum?
I have made a screendump, but I have no idea how to send it to you.
The iPhone is a 4S, iOS 6.1.3
Hey,
Please use this:
@media only screen and (max-width: 767px) {
.image-overlay.overlay-type-video {
display: none !important;
.mejs-overlay-button {
display: none !important;
}
}Remove browser cache the reload the page. :)
Regards,
Ismael
Thanks Ismael,
But sadly no succes.
There’s no caching enabled in WordPress, and I cleared the data cache (and, for good measure, the history cache) in Safari on the iPhone.
I bought this theme for my VIDEO company, so this is kind of a deal breaker…
It doesn’t work, neither in portrait mode nor in landscape mode. But if it did work, wouldn’t it be limited to portrait?
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
etc
Just added a new portfolio item, to make sure there are no caching issues:
http://www.wrks.nl/Rene/portfolio-item/karvan-cevitam/
It has the same double button problem. (For people just now tuning in: two partly overlaying semitransparent buttons, one from iOS, one from Enfold.)
OK, I’ve now created a fully transparent version of wp-content/themes/enfold/js/mediaelement/skin-1/bigplay.png
That does the trick, but it’s quite a brute force hack, and not something I would expect to have to do in a paid theme.
Hi,
The code above is for iPhone. Please use this instead.:
@media only screen and (max-width: 1024px) {
.image-overlay.overlay-type-video {
display: none !important;
.mejs-overlay-button {
display: none !important;
}
}Regards,
Ismael
Thanks Ismael!
For now, I’ll just keep it as it is (with the transparent PNG).
I do hope this issue will be solved structurally in a future update of the theme.
Hey,
Glad we could help. :)
You can request it here: https://kriesi.at/support/topic/enfold-feature-requests
Cheers,
Ismael
I’ve re-tagged Kriesi to flag it for him again. Not sure if he was able to test html5 video on an iphone or not but I’m glad for now you have a workable solution.
Regards,
Devin
- The topic ‘Video on iOS = double play buttons’ is closed to new replies.