title: Download video in the browser instead of playing it in a new tab [CORS]
body: <p>I have <code>&lt;a&gt;</code> and inside its <code>href</code> attribute, I've got a Video URL from a 3rd-party api, when clicking on that <code>&lt;a&gt;</code> the browser opens a New Tab and <strong>Play the video instead of Downloading it!</strong></p>
  
  <p><strong>PROBLEM:</strong> What I need to achieve is to download the video directly after clicking on that <code>&lt;a&gt;</code> instead of playing it in a New Tab and force the user to <code>Right Click</code> then choose <code>Save Video As</code> option to download it manually... Just click on <code>Download</code> and the browser starts to download that video!</p>
  
  <p><strong>NOTE:</strong> I am building a JavaScript App, so I need a solution in JavaScript not PHP, it has to be working on all browsers as well...</p>
  
  <p><strong>EDIT:</strong> I tried the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes" rel="noreferrer"><code>download</code> attribute</a> and it doesn't work, because it's Same-Origin Only!</p>
  
  <p><strong>UPDATE:</strong> The only solution I found was a +7 years old, it manipulates with the <code>.htaccess</code> file, you can check it at this <a href="https://css-tricks.com/snippets/htaccess/force-files-to-download-not-open-in-browser/" rel="noreferrer">CSS Tricks Article</a>, it has a common issue, I can't have 2 links: <code>Watch Video</code> and <code>Download Video</code> using this solution... Many developers mentioned this bug there, but no one fixed it yet!</p>