播放按钮出现在移动设备上的背景图像上

时间:2015-06-19 12:58:29

标签: wordpress video mobile layout responsive-design

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

出于某种原因,我最终看到一个播放按钮居中覆盖移动布局上的背景图像。这是代码(注意:站点基于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/

2 个答案:

答案 0 :(得分:1)

嗯,那反过来试试呢?将图像设为默认图像,如果图像不在手机上,请尝试使用视频;)

答案 1 :(得分:-2)

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