Streaming live at 10am (PST)

Html5 video mobile queries

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)

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

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

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

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

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

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