title: HTML5 Video not playing in IE11 or Edge
body: <p>I've spent the last few days going through as many Stack Overflow questions that seem to cover this issue and I cannot find a solution that works for me, so hopefully this isn't a duplicate question. </p>
  
  <p>I have an MP4 file that is encoded as such: </p>
  
  <p><a href="https://i.stack.imgur.com/2AbaR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2AbaR.png" alt="codec info from vlc"></a></p>
  
  <p>I also converted to webm too, using Miro Video Converter.</p>
  
  <p>I have input this in to my webpage using a straight forward video tag like so: </p>
  
  <pre><code>&lt;video controls autoplay muted loop&gt;
  &lt;source src="video.mp4" type="video/mp4"&gt;
  &lt;source src="video.webm" type="video/webm"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>And this can be seen online: 
  <a href="https://www.kristyellispersonaltraining.co.uk/videotest.htm" rel="nofollow noreferrer">https://www.kristyellispersonaltraining.co.uk/videotest.htm</a></p>
  
  <p>It works perfectly fine in Chrome, Firefox and on phones. But as soon as I try and view it in a Microsoft browser I just can't get it to work. Both IE11 and Edge display errors. </p>
  
  <p><a href="https://i.stack.imgur.com/RiauB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RiauB.png" alt="IE11 and Edge Error Message"></a></p>
  
  <p>I've re-encoded the file several times, and as far as I can tell I have it in the exact codec it should be. </p>
  
  <p>Dev tools display this error:</p>
  
  <blockquote>
    <p>HTTP502: BAD GATEWAY - The server, while acting as a gateway or proxy, received an invalid response from the upstream server it accessed in attempting to fulfil the request. </p>
  </blockquote>
  
  <p>Can anyone shed any light on what might be going on here?</p>