У меня есть работающий слайдер, там показывает 4 видео, мне нужно чтобы когда заходить через мобильное устройство показывало картинку, когда через десктоп то видео, слайдер написан на JS, нашел скрипт isMobile, с ее помощью могу определить с какого устройство заходит юзер
.player__video {
overflow: hidden;
max-width: 100%;
position: relative;
vertical-align: top;
height: 100%;
width: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
теперь проблема в том как css класс соединить с php файлом, чтобы в php файле отображался видео в слайдере;
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) {
}
// Any tablet device.
if( $detect->isTablet() ){
}
скрипт ismobile
<div class="hero__player">
<div class="player">
<?php
$detect = new Mobile_Detect;
if($detect->isMobile()){
$tr= '<img src="/templates/assets/images/button_ground_test.jpg" style="width:100%;">';
$poster="[xfvalue_videopathimage]";
if($poster=="/templates/assets/images/car.jpg"){
echo $ec;
}else if($poster=="/templates/assets/images/health.jpg"){
echo $tr;
}else if($poster=="/templates/assets/images/property.jpg"){
echo $ec;
}else if($poster=="/templates/assets/images/travel.jpg"){
echo $tr;
}
}else{
echo '<video class="player__video" width="506" height="506" muted preload="auto" playsinline poster="[xfvalue_videopathimage]"> <source src="[xfvalue_videopath]" type="video/mp4"> Your browser does not support the video tag. </video>';
}
?>
код в tpl
Попробуйте этот
<?if ( $detect->isMobile() ):?>
<style>
.player__video {
overflow: hidden;
max-width: 100%;
position: relative;
vertical-align: top;
height: 100%;
width: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
</style>
<div class="player__video">
</div>
<?endif;?>
Продвижение своими сайтами как стратегия роста и независимости