0

I have a video that I have positioned as a background to my website, however on mobile devices, specifically iOS-based devices, it is showing a video button in the middle of where the video should be playing. I'm not bothered about the video playing on mobiles, as I have a poster image fallback. I just wish to remove the button. I have tried the following, after searches here on SO, without any luck:

video {
    &::-webkit-media-controls {
        display:none !important;
    }

    &::-webkit-media-controls-start-playback-button {
        display: none!important;
        -webkit-appearance: none;
    }
}

Anything else I can try? I am testing on iPhone 6, though have access to other devices on Browserstack.

wickywills
  • 4,024
  • 2
  • 38
  • 54
  • 1
    I’d rather hide the whole video element on mobile, and serve the placeholder image separate … – CBroe Nov 22 '16 at 12:54
  • The accepted answer in this thread works for me http://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button. Which looks to be the same as your solution. What version of iOS are you using? – Turnip Nov 22 '16 at 12:58
  • @Turnip Unfortunately that doesn't work for me either. I am testing on all iPhones/iPads using Browserstack, as well as having a few physical devices to hand (iPad 4, iPhone 7, iPhone 6, iPhone 4S) running the latest available iOS versions – wickywills Nov 23 '16 at 09:30
  • @CBroe if you hide the entire video element on small screens, then it degrades the experience for Android or other small screen devices (Chrome mobile emulator) that will autoplay the video. – Chloe Apr 19 '17 at 01:51
  • Possible duplicate of [Hide iPhone HTML5 video play button](http://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button) – Chloe Apr 19 '17 at 02:20

3 Answers3

1

Just use

<video webkit-playsinline ></video>
Boli Lyrics
  • 11
  • 1
0

Appears the code in my question DID work after all, I had an unrelated issue with caching that was preventing some changes from showing(!)

wickywills
  • 4,024
  • 2
  • 38
  • 54
0

After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.

worked on iOS 15.

document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <video id="hello" playsinline preload muted loop>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
</body>
</html>

https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/

Joel Silva
  • 3
  • 2