播放按钮显示在移动设备的背景图像上答案

【问题标题】：Play button shows up on background image on mobile devices播放按钮显示在移动设备的背景图像上
【发布时间】：2015-06-19 12:58:28
【问题描述】：

所以我编写了这个脚本来检查访问者是使用移动设备还是桌面，以确定是否显示背景视频（如果是移动设备，则输出将是静态图像）。

由于某种原因，我最终看到一个播放按钮居中覆盖移动布局上的背景图像。这是代码（注：网站基于WP，使用wp_is_mobile()函数判断设备）-

<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>

您可以在这里查看正在进行的工作 - http://52.17.182.78
非常感谢任何帮助或指示。

编辑：已解决！一切都需要一些技巧才能在 iOS7+ 上正确显示（也可能在 Android 设备上），请参阅这篇文章 - https://css-tricks.com/custom-controls-in-html5-video-full-screen/

【问题讨论】：

函数 wp_is_mobile() 工作正常吗？
信息不足。理想情况下，您还应该共享 HTML 输出以及移动设备的 CSS 规则。
@sarath 是的，它工作正常。原来我需要应用某些 CSS 设置才能使按钮消失，请参阅我更新的帖子。

标签： wordpress video mobile layout responsive-design

【解决方案1】：

好吧，反过来试试呢？将图像设为默认，如果它不在移动设备上，请尝试使用视频；）

【讨论】：

【解决方案2】：

尝试给video标签添加属性controls="false"。

【讨论】：

谢谢，试过了，没有任何效果。按钮还在。