Wordpress “播放”按钮显示在移动设备的背景图像上

Wordpress “播放”按钮显示在移动设备的背景图像上,wordpress,video,mobile,layout,responsive-design,Wordpress,Video,Mobile,Layout,Responsive Design,因此,我编写了这个脚本,检查访问者是使用移动设备还是桌面,以确定是否显示背景视频(如果是移动设备,则输出为静态图像) 出于某种原因,我最终看到一个以播放按钮为中心,覆盖在手机布局的背景图像上。这是代码(注意:站点基于WP,并使用WP\u is\u mobile()函数确定设备)- 尝试将属性controls=“false”添加到视频标记中。那么,换个方法试试怎么样?将图像设为默认图像,如果它不在手机上,请尝试使用视频;) 谢谢,试过了,但是没有效果。按钮仍然存在。函数wp\u\u mobile

因此,我编写了这个脚本,检查访问者是使用移动设备还是桌面,以确定是否显示背景视频(如果是移动设备,则输出为静态图像)

出于某种原因,我最终看到一个以播放按钮为中心,覆盖在手机布局的背景图像上。这是代码(注意:站点基于WP,并使用
WP\u is\u mobile()
函数确定设备)-



尝试将属性controls=“false”添加到视频标记中。

那么,换个方法试试怎么样?将图像设为默认图像,如果它不在手机上,请尝试使用视频;)

谢谢,试过了,但是没有效果。按钮仍然存在。函数wp\u\u mobile()是否正常工作?这是不够的信息。理想情况下,您还可以共享HTML输出以及移动设备的CSS规则。@sarath是的,它工作正常。原来我需要应用某些CSS设置才能使按钮消失,请参阅我更新的帖子。
<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>