Hide videos in Mobile for PageSpeed with JS

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

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

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

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


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