Html5 video mobile queries

Design help General
3

Toggle

Class 1 - show on desktop(video) - visible on destkop - hidden on tablet and below
Class 2 - show on mobile (image) - the opposite (deskop hide - mobile show).

Now because you set the video to autoplay - stop the video by code (More safety).

Copy-paste before body for this page only (Under page-setting).

code

Disable autoplay on mobile
https://stackoverflow.com/questions/42862860/disable-html5-video-autoplay-only-on-smartphone

<!-- Disable HTML5 video autoplay only on smartphone -->
<script>
$(document).ready(function(){
  var videoElement = $(".projectvideo video"); /* select the video element inside projectvideo class */
  var screenWidth = $(window).width();
  // if window width is smaller than 800 remove the autoplay attribute
  // from the video
  if (screenWidth < 800){
        videoElement.removeAttr('autoplay');
  } else {
    videoElement.attr('autoplay');
  }
});
</script>

naming & code above

Do not change the class name projectvideo on webflow (Or change and remember to update the code).