title: serve different content for a mobile device than desktop
body: <p>I am building a website and wish to serve a video if the user is on a desktop device, and if on a mobile I am going to serve a gif.</p>
  
  <p>Does anyone have any guidance for best practices on this? </p>
  
  <p>Is the below code enough? When I test this on chrome it doesn't show the mobile gif, but perhaps something is incorrect here.</p>
  
  <p>Should I be using modernizr to cover browser/device inconsistencies I may not be aware of? Is there a <code>data-src</code> approach that I should be taking perhaps?</p>
  
  <pre><code>&lt;div id="main"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var main = document.getElementById('main');
  
  //check if a mobile device
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     main.innerHTML = '&lt;img src="http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif&gt;"';
  }
  else {
      main.innerHTML = '&lt;video width="640" height="360" controls="" autoplay=""&gt;&lt;source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"&gt;&lt;source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"&gt;&lt;source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"&gt;&lt;/video&gt;';
  }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>