Vignette (inset shadow) on a video
I am struggeling with putting up a vignette (shadow being inset) to a video-tag in html5.
Things I was trying to do:
- Put a box-shadow on the video-tag itself
- Put the video tag inside a div and give that div the box-shadow
- Put a div after the video tag and give it the box-shadow (I was referring to a stackoverflow thread: https://stackoverflow.com/questions/26786940/can-you-have-css-box-shadow-inset-show-on-video-element)
Nothing of those seem to work or just work kind of, but not as expected. I'd like the vignette to be only visible at the bottom, and blur out like 20% of the height.
A codepen I was trying to mess with (I put up a box-shadow on any element, cuz why not):
https://codepen.io/Proudyy/pen/eYjBewO
Stack Overflow
Can you have CSS box shadow (inset) show on video element
I added a box shadow to a <div> and added a <video> element to the div.
The box shadow shows up on the div, however it doesn't affect the video element.
Is this the expected behaviour, ...
6 Replies
something like this ?https://codepen.io/MannixMD/pen/vYaypOW
Most likely. Please refer to the thumbnail (respectively poster) of the codepen website I sent previously. The shadow has to be only at the bottom.
![](https://utfs.io/f/32fe0215-efdb-4d3e-b6ff-80ff237136bd-d9i2or.png)
Changing the box-shadow just as how I wanted worked out pretty well.
New code (yours edited):
![](https://utfs.io/f/aed010eb-ae12-4741-880b-b66b412d07b9-d9i2or.png)
<:PES5_NiceThumbsUp:803737872414801921>
Works, thanks. 🙂
I saved my pen now as well, it will be available once again. If you'd like to see the solution, refer to it 😄
https://codepen.io/Proudyy/pen/eYjBewO