모바일 기기의 배경 이미지에 재생 버튼이 나타납니다.

모바일 기기의 배경 이미지에 재생 버튼이 나타납니다.

그래서 방문자가 배경 동영상을 표시할지 여부를 결정하기 위해 모바일 장치를 사용하는지 바탕 화면을 사용하는지 확인하는 스크립트를 작성했습니다(모바일 장치일 경우 출력은 정적 이미지가 됩니다).

어떤 이유에서인지 모바일 레이아웃에 배경 이미지를 겹쳐 놓은 가운데 재생 버튼이 나타납니다.이것이 코드입니다. (참고: 사이트는 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/ .

반대로 해보는 건 어떨까요?이미지를 기본값으로 설정하고 모바일에 없는 경우 비디오를 사용해 보십시오 ;)

비디오 태그에 controls=" false" 속성을 추가해 봅니다.

언급URL : https://stackoverflow.com/questions/30938798/play-button-shows-up-on-background-image-on-mobile-devices