Fallback Image On iPhone Not Showing

I don’t want the fullscreen video to show on mobile devices and want an image instead. The video works great on a computer, but it’s just black on a mobile device.

Any ideas what I’m doing wrong? Thanks!

Link

<section id="intro" class="content-section intro-section">
<div class="pane-wrapper">
                <div class="primary-pane">
                    <img src="https://cerdaevents.com/wp-content/uploads/2014/05/hbwhiteoutline.png" alt="" class="logo">
                </div>
            </div>
<div id="video-container">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" style="position:absolute; height:auto; width:100%;">

 <source src="https://cerdaevents.com/wp-content/themes/wordpress-bootstrap-master/videos/happy06-8262013.webm" type="video/webm"> <source src="https://cerdaevents.com/wp-content/themes/wordpress-bootstrap-master/videos/happy06-8262013.oggtheora.ogv" type="video/ogv">

<img src="https://cerdaevents.com/wp-content/uploads/2014/05/coachella-2014-wallpaper-1024x763.jpg" style="min-width:100%; height:auto">
</video>
</div>

        </section>

And some CSS

.video .intro-section {
background: #3b4347;
background-image: none;
}

.intro-section {
background: transparent url('https://www.agentrecommend.com/wp-content/uploads/2014/04/coachellapurple.png') no-repeat center center;
background-size: cover;
background-color: #3b4347;
color: #fff;
padding: 0;
position: relative;
height: 100%;
min-height: 100%;
}

#video-container {
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 100%;
}