html - Can you have css box shadow (inset) show on video element -

html - Can you have css box shadow (inset) show on video element -

i added box shadow <div> , added <video> element div. box shadow shows on div, doesn't impact video element.

is expected behaviour, , there way box shadow impact video well?

code snippet:

class="snippet-code-css lang-css prettyprint-override">.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); } class="snippet-code-html lang-html prettyprint-override"><div class="video-player"> <video width="100%"> <source src="http://bit.ly/1wisub2" type="video/mp4" /> </video> <h1>test</h1> </div>

this isn't big issue, found rather interesting.

edit: jsfiddle

edit 2: inset shadows

edit 3: possible show inset shadow on video element. requires additional ement. if want accomplish see reply @cport1 gave

the box-shadow part of parent element, renders below video. 1 alternative have div places shadow on video so:

http://jsfiddle.net/dbt6g5ra/1/

<div class="video-player"> <video class="vid" width="100%"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> </video> <h1>test</h1> <div class="shadow"></div> </div> .video-player { //styles } .shadow { position: absolute; width: 100%; height: 100%; box-shadow: inset 0px 0px 36px 36px rgba(0,0,0,0.75); top: 0; left: 0; }

html css3