title: Can you have CSS box shadow (inset) show on video element
body: <p>I added a box shadow to a <code>&lt;div&gt;</code> and added a <code>&lt;video&gt;</code> element to the div.
  The box shadow shows up on the div, however it doesn't affect the video element.</p>
  <p>Is this the expected behaviour, and is there a way to get the box shadow to affect the video as well?</p>
  <p><strong>Code snippet:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.video-player {
      -webkit-box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75);
      box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="video-player"&gt;
      &lt;video width="100%"&gt;
          &lt;source src="http://example.com/1wIsuB2" type="video/mp4" /&gt;
      &lt;/video&gt;
      &lt;h1&gt;Test&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This clearly isn't a big issue, but I found it rather interesting.</p>
  <p><strong>EDIT:</strong> <a href="https://jsfiddle.net/dbt6g5ra/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p><strong>EDIT 2:</strong> This is for inset shadows</p>
  <p><strong>EDIT 3:</strong> It is possible to show an inset shadow on the video element. It requires an additional ement. If you want to achieve this see the answer  @cport1 gave</p>