Html5 video mobile queries

Design help General
1

Hi.

I am trying to add an embed html5 video for some thumbnails. The embed code I have below works fine for desktop, but on mobile i’d like to just use an image. I’ve tried adding a media query in the section, but not an expert on that. Any help would be appreciated. Thank you.

Here is my site Read-Only: https://preview.webflow.com/preview/everythere?utm_medium=preview_link&utm_source=designer&utm_content=everythere&preview=91c7a3f830c363166a782601a197cb7b&pageId=5d43df9b95c1f543958658ba&mode=preview
(how to share your site Read-Only link)

2

Also, related. The video plays fine in the editor on desktop, but when I publish, only displays the poster.

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

4

I tried the above solution, but on chrome (iphone) the video is still there. :thinking:

image
image1125×2436 440 KB

5

The hidden div not working? Inspect the code.
Very Weird. Add live URL.

6

The media attribute shown in this article has been removed from implementation in source for the video element in Blink.