html5 video background video on ios

Question

I have the following video that is part of a slider.

<div class="slide video-bg">
    <video muted webkit-playsinline playsinline poster="/video/3/4_Marching_band-HD_1080p.jpg">
        <source src="/video/3/4_Marching_band-HD_1080p.webm" type="video/webm">
        <source src="/video/3/4_Marching_band-HD_1080p.mp4" type="video/mp4">
        <source src="/video/3/4_Marching_band-HD_1080p.ogv" type="video/ogg">
    </video>
</div>

When the page loads, play() is called on the video. On every desktop browser I've tried this works great. But on iOS the video never plays.

I've read https://webkit.org/blog/6784/new-video-policies-for-ios/ and tried to follow each requirement. I even added the autoplay attribute to the video even though I want to control it with js. The video has no audio and is visible when the page loads. Any idea why it won't play on iOS?

Page in question: http://heartland.thinkersites.com/products/

Answer 1

Add this to your CSS to remove the unsightly play button from iOS devices:

                *::-webkit-media-controls-panel {
                  display: none!important;
                  -webkit-appearance: none;
                }

                *::--webkit-media-controls-play-button {
                  display: none!important;
                  -webkit-appearance: none;
                }

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