title: CSS3 Background Gradient Overlay HTML5 Video
body: <p>I want to apply a CSS3 gradient overlay to a video. I have a feeling this could be to do with z-indexing / stack orders so here is my code.</p>
  
  <p>Div structure: </p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="gradient"&gt;
          &lt;video&gt;&lt;/video&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS I'm using is a background-image radial gradient: </p>
  
  <pre><code>.gradient {
          background-image: 
          radial-gradient(
              circle at 36% 48%, #000000, 
              rgba(11, 39, 65, 0.32) 87%, 
              rgba(0, 0, 0, 0.0)
          );
      }
  </code></pre>
  
  <p>The styling is applied to the gradient div along with position: relative; and z-index: 10; to make the gradient overlay the video. </p>
  
  <p>The gradient doesn't appear at all - how is this achievable?  </p>