show html5 videos only on desktop
<p>I have this code which populates the src attributes of the sources if the user is not on mobile:</p>

<pre><code> if($.browser.mobile)
   {
       console.log("is mobile")
      // it is mobile browser
   }
   else
   {
     console.log("is desktop")
      // no mobile browser
      var sources = document.querySelectorAll('video#patient-video source');
     // Define the video object this source is contained inside
     var video = document.querySelector('video#patient-video');
     for(var i = 0; i&lt;sources.length;i++) {
       sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
     }
     // If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
     video.load();
     video.muted= "muted";
   }
</code></pre>

<p>To check if it's a mobile browser, I use the plugin: </p>

<pre><code>detectmobilebrowser.js
</code></pre>

<p>My HTML is as follows:</p>

<pre><code> &lt;video id="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop&gt;
            &lt;source data-src="../../assets/video/patient-home-video-comp.mp4" src="" type="video/mp4"&gt;
            &lt;source data-src="../../assets/video/patient-home-video-comp.webm" src="" type="video/webm"&gt;
            &lt;source data-src="../../assets/video/patient-home-video-comp.ogv" src="" type="video/ogg"&gt;
          &lt;/video&gt;
</code></pre>

<p>This works fine for one specific video, but how can I adapt the Javscript so that it does the same for all videos on the page.</p>