Hide videos in Mobile for PageSpeed with JS

[Sebastian_Bertolo1 (Sebastian Bertolo)]

Hello community,
I am trying to make a video appear after 500px, for this I have followed this post:

SEO - Mobile PageSpeed Insights issue with videos/images

Hi @Natri , Hiding assets, like a video or image, will not prevent them from being downloaded >> only hides them from being displayed ( display:none ) To avoid that, you will need to selectively add the videos using javascript. You can use this custom code to get it done. add id to each video element (you can use 1,2,3 like in the example or assign your own) Adjust the width as you need (in example > 500) Paste in the URL for each video (if you host in webflow or any host service) …

The videos work for me, but they don’t stop appearing when I shrink the screen. I did it here:

https://fuzz-c1a184.webflow.io/video
https://preview.webflow.com/preview/fuzz-c1a184?utm_medium=preview_link&utm_source=designer&utm_content=fuzz-c1a184&preview=fed4946b6267f8c9d78d9779bba24779&pageId=64c9aa0e786dc4cac6e7555f &workflow=preview

<script> 
   // give your videos id of 1,2,3 OR replace 1,2,3 in code to the relevant id.
   const vid1 = document.getElementById('1').getElementsByTagName('video')[0];

  
   //  will add videos only if screen is > 500px width. change as needed. 
   if (window.innerWidth > 500) {    
   
   var source = document.createElement('source');
   source.setAttribute('src', 'https://assets.website-files.com/610a793b9a20730702ea3735/610a858854862fa08f6edf61_Ants%20Walking-transcode.mp4'); // replace with relevant source url
   vid1.appendChild(source);
  
  
 
   }

</script>

I have respected everything but I don’t know what is happening or why it doesn’t work for me, I hope you can help me.
Thank you