Play button is displayed on the background image on mobile devices

Question

So, I wrote this script that checks if the visitor is using a mobile device or desktop to determine whether to show the background video or not (if it is a mobile device, the result will be a static image).

For some reason, I end up seeing a play button with the center overlaying the background image on the mobile layout. This is the code (note: the site is based on WP and uses the wp_is_mobile() function to determine the 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 can view the current work here - http://52.17.182.78
Any help or guidance is greatly appreciated.

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

Answer 1

Well, what about trying differently? Make a default image and if it is not on a mobile device, try using a video;)

Answer 2

Try adding the attribute control = "false" to the video tag.