'Hide HTML5 <video> play button on iOS

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.

ioscsshtmlvideo


Solution 1:[1]

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

Solution 2:[2]

Just use

<video webkit-playsinline ></video>

Solution 3:[3]

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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wickywills
Solution 2 Boli Lyrics
Solution 3

Related Questions