title: Broken Youtube thumbnails do not fire error callback
body: <p>Will an image error callback fire if an image is 404, but the host returns an image anyway?</p>
  
  <p>I am trying to determine on the client whether a Youtube thumbnail is valid before submitting the URL to the server.  Normally you can generate a thumbnail URL without querying their API with the format <code>http://img.youtube.com/vi/**ID**/maxresdefault.jpg</code></p>
  
  <p>Some videos do not have high-res thumbnails, for example, this one:
  <a href="http://img.youtube.com/vi/ty62YzGryU4/maxresdefault.jpg" rel="noreferrer">http://img.youtube.com/vi/ty62YzGryU4/maxresdefault.jpg</a></p>
  
  <p>However, a lower quality thumbnail always exists:
  <a href="http://img.youtube.com/vi/ty62YzGryU4/default.jpg" rel="noreferrer">http://img.youtube.com/vi/ty62YzGryU4/default.jpg</a></p>
  
  <p>Ideally I would be able to detect whether the thumbnail did load via this code snippet, which would call "done" when it loaded a valid thumbnail:</p>
  
  <pre><code>var id = "ty62YzGryU4"
  var tries = 0
  var thumb = "http://img.youtube.com/vi/" + id + "/maxresdefault.jpg"
  var img = new Image ()
  img.onload = function(){ console.log('ok'); done(id, thumb) }
  img.onerror = function(){
      switch (tries++){
          case 0:
              img.src = thumb = "http://img.youtube.com/vi/" + id + "/hqdefault.jpg"
              break;
          case 1:
              img.src = thumb = "http://img.youtube.com/vi/" + id + "/default.jpg"
              break;
          case 2:
              done(id, thumb)
              break;
      }
  }
  img.src = thumb
  if (img.complete) img.onload()
  </code></pre>
  
  <p>However this is not the case -- while I see a 404 error in the console, neither the onload nor the onerror callbacks fire, and thus <code>done</code> is never called.</p>
  
  <p>If I set <code>img.crossOrigin = "Anonymous"</code> the onerror callback fires... for every thumbnail, because of the accursed Cross-Origin Resource Sharing policy.</p>
  
  <p>I have also tried crafting an XMLHttpRequest, but to no avail:</p>
  
  <pre><code>xmlhttp = new XMLHttpRequest()
  xmlhttp.onreadystatechange = function() {
      console.log(xmlhttp.readyState)
      console.log(xmlhttp.status)
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send(null);
  </code></pre>
  
  <p>Whether I set <code>X-Requested-With: XMLHttpRequest</code> or not, the readyState goes from <code>1</code> to <code>4</code> but status is always zero!</p>
  
  <p>Is there any way to see if this particular image gave a 404 without using the API?</p>