title: How to enable CORS for html5 video loading vtt file?
body: <p><strong>My Need</strong></p>
  
  <p>html5 video element loads both a video and a vtt file saved in a different domain.</p>
  
  <p><strong>The problem</strong></p>
  
  <p>vtt is not loaded and error <code>Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.</code></p>
  
  <p><strong>My investigation</strong> </p>
  
  <p>I am aware that CORS needs to be used so vtt can be loaded in html5 successfully.</p>
  
  <p>I have enabled CORS on server side for requests from any domain.</p>
  
  <p>Some articles say adding <code>crossorigin</code> or <code>crossorigin="anonymous"</code> into ` element can do the job, but it doesn't work. Either the video is not loaded at all or different errors appear</p>
  
  <p>I have put my code here below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="container"&gt;
      &lt;video id="myvideo" controls preload="auto" width="640" height="264" autoplay&gt;
        &lt;source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"&gt;&lt;/source&gt;
        &lt;track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default&gt;
      &lt;/video&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>