How to just display html video poster for mobile device

Question

I currently have a HTML video within a div that auto plays for desktop browsers. I'm trying to implement a fix that DISABLES the video for mobile and only displays the video POSTER in its place. I feel like it should be a simple fix, but I can't find any CSS or JS to do this.

Code below:

<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>  

Answer 1

this is what I did

in 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>

in js:

check if the page is loaded in mobile

if (isMobile) { $(".col-1 no-padding").find('video').attr('poster', 'images/joe-rule/banner.jpg'); }

So that the poster will only be displayed in mobile.

you may need to search the use of "isMobile" or any other to check if the page is loaded in mobile.