Play button shows up on background image on mobile devices

Question

So I've written this script that checks whether the visitor is using a mobile device or a desktop in order to determine whether to display a background video or not (if it's a mobile device the output will be static image instead).

For some reason I end up seeing a play button centered overlaying the background image on the mobile layout. This is the code (note: site is based on WP and uses the wp_is_mobile() function to determine device) -

<section class="hero">
        <?php
    /*
    Display background image
    */
    if ( (get_field( 'hero_display' ) == 'image') || (wp_is_mobile()) ) :
    $hero_image = get_field('hero_image');
    ?>
    <div class="background-image" data-sm="<?php echo $hero_image['sizes']['sm']; ?>" data-md="<?php echo $hero_image['sizes']['md']; ?>" data-lg="<?php echo $hero_image['sizes']['lg']; ?>"></div>
    <?php endif; ?>

    <?php
    /*
    Display background video
    */
    if ( (get_field( 'hero_display' ) == 'video') && (!wp_is_mobile()) ) :
    ?>
    <div class="background-video">
        <video autoplay="autoplay" preload="auto" poster="<?php the_field( 'hero_capture' ); ?>" loop="loop" muted="true" class="background-video">
            <source src="<?php the_field( 'hero_source' ); ?>" type="video/mp4">
        </video>
    </div>
    <?php endif; ?>
</section>

You may view the work in progress here - http://52.17.182.78
Any help or directions is much appreciated.

Edit: Solved! There are some tricks required for everything to display correctly on iOS7+ (and also possible on Android devices), see this article - https://css-tricks.com/custom-controls-in-html5-video-full-screen/

Answer 1

Well, what about trying it the other way around? Make the image as default and if it is not on mobile, try to use video ;)