如何仅显示移动设备的html视频海报

我目前在一个div中有一个HTML视频，可以在桌面浏览器中自动播放。我正在尝试实现一个修复程序，它将禁用移动设备的

视频

，并且只在其位置显示视频海报。我觉得这应该是一个简单的修复，但我找不到任何CSS或JS来做这件事

代码如下：

<div class="row">
    <div class="col-1 no-padding">
         <video loop muted autoplay poster="images/joe-rule/banner.jpg" class="width">
            <source src="images/joe-rule/video-reel.mp4" type="video/mp4" >
    </video>
    </div>
</div>  

我就是这么做的

在html中：

<div class="row">
<div class="col-1 no-padding">
     <video loop muted autoplay class="width">
        <source src="images/joe-rule/video-reel.mp4" type="video/mp4" >
</video>
</div>

在js中：

检查页面是否已在mobile中加载

if（isMobile）{
$（“.col-1无填充”）.find（'video'）.attr（'poster'，'images/joe rule/banner.jpg'）；
}

因此，海报将仅在手机中显示

您可能需要搜索“isMobile”或任何其他的用法，以检查页面是否已在mobile中加载。

$（“.col-1无填充”）应为$（“.col-1.无填充”）