Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #27766

    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

    #135283

    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

    #135284

    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/

    #135285

    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;

    }

    #135286

    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

    #135287

    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

    #135288

    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

    #135289

    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…

    #135290

    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

    #135291

    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.)

    #135292

    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.

    #135293

    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

    #135294

    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.

    #135295

    Hey,

    Glad we could help. :)

    You can request it here: http://www.kriesi.at/support/topic/enfold-feature-requests

    Cheers,

    Ismael

    #135296

    There were _attempts_ at helping, for which I’m grateful.

    #135297

    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

    #135298

    Hey! I have tested the solutions here and they work, not sure why you couldnt get them to work yourself. I will add one to the next theme update so you can simply update the theme without the need to do your modification again.

    Cheers!

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Video on iOS = double play buttons’ is closed to new replies.