Okay
  Public Ticket #1145765
Video not playing on iPhone
Closed

Comments

  • Dan started the conversation
    April 24, 2017 at 8:40am

    Is there a way to make header and about video play on an iPhone. Doesnt autoplay. Does not play at all. I can see the first frame and a play button but not working.

    Thanks

  •  2,010
    Ocean replied
    April 25, 2017 at 2:55am

    Hello,

    HTML5 Video is not play on mobile devices, it's use a background image to instead background video.

    Thank you

  • Dan replied
    April 26, 2017 at 11:57pm

    Ok I understand however the background image on Ananke demo site does not have a play button on the image. This is good. My background image does have a play button. This is confusing to the viewer and looks bad. Can I remove this play symbol?

  •  2,010
    Ocean replied
    April 27, 2017 at 4:16am

    Hello,

    Please send your wp admin account for me test and fixed (Private reply when post your account info here)

    Thank you

  •   Dan replied privately
  •  2,010
    Ocean replied
    April 27, 2017 at 10:06am

    Hello,

    I just add this css code in your Ananke Options -> Styling Options -> CSS code:

    @media (max-width: 767px) {
    /* But it is not enough now, below dont hide play button parent div */
*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}
/* Old shadow dom for play button */
*::--webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works */
*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}
.text-over-video {
    left: 20px;
    font-size: 15px;
    line-height: 15px;
}
}

    Thank you

  • Dan replied
    April 27, 2017 at 12:01pm

    Great thanks! works well. I am curious - I cant see the code in the Ananke Options -> Styling Options -> CSS code box. Once installed, is the code no longer visible in that box? I am just trying to understand how it behaves incase i need to do it down the track. Thanks again.

  •  2,010
    Ocean replied
    April 28, 2017 at 2:02am

    Hello,

    I have added code for you in : http://farmwalker.com/wp-admin/admin.php?page=theme_option_options&tab=10

    Here is css code for you, if in future you needed.

    @media (max-width: 767px) {
    /* But it is not enough now, below dont hide play button parent div */
*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}
/* Old shadow dom for play button */
*::--webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works */
*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}
.text-over-video {
    left: 20px;
    font-size: 15px;
    line-height: 15px;
}
}

    Thank you