title: Prevent a video background from being downloaded on mobile browsers
body: <p>I have a hero on a landing page with a video background and want to <strong>prevent the webm/mp4 file from being downloaded on mobile devices</strong>. I've seen some solutions that involve media queries with <code>display:none</code> attribute. Even though they're fine at first impression, I verified, using Chrome debug tool connected to my phone, that the file is still being downloaded.</p>
  
  <p>Here's the video presented in the HTML5 markup:</p>
  
  <pre><code>&lt;video preload="metadata" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="bgvid"&gt;
    &lt;source src="video.webm" type="video/webm"&gt;
    &lt;source src="video.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>The following is the method I use to detect mobile browsers:</p>
  
  <pre><code>function detectmob() { 
  
      if( navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      || navigator.userAgent.match(/iPad/i)
      || navigator.userAgent.match(/iPod/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i)
      ){
  
          // If mobile, then we do all this
  
      }
      else {
  
          // If not mobile then do this
  
      }
  } // detectmob
  </code></pre>
  
  <p>How can I prevent someone from downloading the video on mobile devices within my JavaScript function?</p>