title: Azure storage CORS settings for video element
body: <p>I'm creating panorama tour with some additional content (videos,...) with three js and react.</p>
  <p>My videos are stored on private azure storage, where I generate SAS token for certain video files.</p>
  <p>When I try to play video from gui it works with CORS well :</p>
  <pre><code>        &lt;video id={uid} autoPlay controls controlsList=&quot;nodownload&quot;&gt;
              &lt;source style={{objectFit: &quot;cover&quot;}}
                      src={videoPath}
                      type={&quot;video/mp4&quot;}/&gt;
              &lt;/video&gt; //this one is working
  </code></pre>
  <p>videoPath in this case is on <a href="http://www.mystorage.azurelink.net" rel="nofollow noreferrer">www.mystorage.azurelink.net</a>, not on my origin.</p>
  <p>But when I create video element dynamically per view:</p>
  <pre><code>    const videosRoot = document.getElementById(&quot;videosroot&quot;)
  
      const video: HTMLVideoElement = document.createElement(&quot;video&quot;)
      video.id = `video-${this.uid}`
      video.crossOrigin = &quot;anonymous&quot;
      video.playsInline = true
      video.muted = true
      video.style.display = &quot;none&quot;
  
      const source = document.createElement(&quot;source&quot;)
      source.id = `video-source-${this.uid}`
  
      video.appendChild(source)
  
      videosRoot.appendChild(video)
  ....
      const videoTexture = new three.VideoTexture(videoElement)
  </code></pre>
  <p>I got an error:</p>
  <p><code>Access to video at 'https://mystorage.blob.core.windows.net/MYCONTAINER/Videos/default.mp4?MYSASTOKEN'</code>
  from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
  <p>and</p>
  <pre><code>net::ERR_FAILED 206
  </code></pre>
  <p>My storage CORS configuration:</p>
  <p><img src="https://i.stack.imgur.com/bmT7P.png" alt="My storage configuration" /></p>
  <p>What should I change in my application to make this working (video is obviously played because I get on play ended callback) ?</p>
  <pre><code>        video.crossOrigin = &quot;anonymous&quot;
  </code></pre>
  <p>I get error:</p>
  <pre><code>index.js:1 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded.
      at Object.texImage2D (http://localhost:3000/static/js/vendors~main.chunk.js:339244:21)
      at uploadTexture (http://localhost:3000/static/js/vendors~main.chunk.js:340051:19)
      at WebGLTextures.setTexture2D (http://localhost:3000/static/js/vendors~main.chunk.js:339679:9)
      at SingleUniform.setValueT1 [as setValue] (http://localhost:3000/static/js/vendors~main.chunk.js:336186:12)
      at WebGLUniforms.upload (http://localhost:3000/static/js/vendors~main.chunk.js:336677:11)
      at setProgram (http://localhost:3000/static/js/vendors~main.chunk.js:343221:21)
      at WebGLRenderer.renderBufferDirect (http://localhost:3000/static/js/vendors~main.chunk.js:342547:21)
      at renderObject (http://localhost:3000/static/js/vendors~main.chunk.js:342939:13)
      at renderObjects (http://localhost:3000/static/js/vendors~main.chunk.js:342915:9)
      at renderScene (http://localhost:3000/static/js/vendors~main.chunk.js:342855:35)
      at WebGLRenderer.render (http://localhost:3000/static/js/vendors~main.chunk.js:342744:7)
      at World.draw (http://localhost:3000/static/js/main.chunk.js:4310:21)
      at World.step (http://localhost:3000/static/js/main.chunk.js:4318:14)
      at onAnimationFrame (http://localhost:3000/static/js/vendors~main.chunk.js:342661:35)
      at onAnimationFrame (http://localhost:3000/static/js/vendors~main.chunk.js:332519:5)
  </code></pre>