How can I load different videos or sources base on screensize or device?

Hi All.

I am working with divi and encountered an issue I could not resolve. Can you guys tell me how I can actually load videos or images base on screen size?

I am trying to optimize some page for load time. I have two videos setting up separately for mobile and for desktop, I also set the visibility checkbox to specific device. Everything works when I try to load the page, the videos are displaying the correct video, however I noticed that the site actually downloaded mobile and desktop videos and set the element invisible.

I am wondering is there a way to prevent the site from even downloading unnecessary videos?