title: How to prefetch video in a react application?
body: <p>I have a React app with a component that loads different videos depending on  user input. There are only 4 or 5 small videos, so I'd like to pre-fetch all of them when the browser is inactive. </p>
  
  <p>Within my component, I have:</p>
  
  <pre><code>&lt;video src={this.props.video} type="video/mp4" /&gt;
  </code></pre>
  
  <p>In my index.html, I have a line in the head for a video:</p>
  
  <pre><code>&lt;link rel="prefetch" as="video/mp4" href="link/to/my/video.mp4"&gt;
  </code></pre>
  
  <p>However, this doesn't work. Looking at the console, I can see that the video is fetched (with a 200 status) but not stored in the cache (size is 5 Mb for the response, 0 Mb for on disk). When I provide user input and the component needs to display that video, it is fetched again which takes a few seconds.</p>
  
  <p>PS - The reason I'm not trying to use preload on the video element is because preload only works if the page you are looking at has the video in it. In my case, I want to load the videos even if they are not required for the current page.</p>
  
  <p>Update: I made a <a href="https://codepen.io/vipin-ajayakumar/pen/pZGdLL?editors=1000" rel="noreferrer">pen</a> where you can see that the video isn't pre-fetched despite the use of a link tag in the head.</p>