Итак, я написал этот скрипт, который проверяет, использует ли посетитель мобильное устройство или рабочий стол, чтобы определить, следует ли отображать фоновое видео или нет (если это мобильный устройство выводит вместо этого статическое изображение).Кнопка воспроизведения отображается на фоновом изображении на мобильных устройствах
По какой-то причине я в конечном итоге вижу кнопку воспроизведения по центру, наложенную на фоновое изображение на мобильном макете. Это код (примечание: сайт основан на 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() работает правильно? – sarath
Этого недостаточно. В идеале вы также можете использовать вывод HTML, а также правила CSS для мобильных устройств. – rnevius
@sarath Да, он работает правильно. Оказалось, что мне нужно применить некоторые настройки CSS, чтобы кнопка исчезла, см. Мой обновленный пост. –