Setting the source for a video using Javascript not working

Question

This code seems to work fine on iPhone, but does not work on desktop or Android phones. The weird thing is, when I check the code in Inspect Element console, the source for the video is shown correctly, but it does not appear at all. There are no console errors. I also tried setting src="" on the element.

HTML:

<video playsinline autoplay muted loop preload="auto" id="bgvid">
<source type="video/mp4">
</video>

JS:

if($(window).width() < 768){
     $(function() {
         $("#bgvid > source").attr("src", "resources/css/img/backvidMob3.mp4");
     });
 }
 else{
     $(function() {
         $("#bgvid > source").attr("src", "resources/css/img/backvidDesk.mp4");
     });
 }