Kevin Powell - Community•2y ago

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, ...

Steven

CodePen

Video with vignette

...

6 Replies

Mannix•2y ago

something like this ?https://codepen.io/MannixMD/pen/vYaypOW

proudyyyy•2y ago

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.

proudyyyy•2y ago

Changing the box-shadow just as how I wanted worked out pretty well. New code (yours edited):

.video-player{position: relative;}
.video-player::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 100%;
    box-shadow: inset 0px -35px 30px 0px rgba(0,0,0,0.9);
    z-index: 999;
}

.video-player{position: relative;}
.video-player::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 100%;
    box-shadow: inset 0px -35px 30px 0px rgba(0,0,0,0.9);
    z-index: 999;
}

proudyyyy•2y ago

proudyyyy•2y ago

<:PES5_NiceThumbsUp:803737872414801921> Works, thanks. 🙂

proudyyyy•2y ago

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

Steven

CodePen

Video with vignette

...

Gaming

Programming

Vignette (inset shadow) on a video