Dynamic shadow from the video
I have a video and I want to make a dynamic shadow of it. I was never able to do it, but I was able to do it with the image:
img.shadowed {
// some properties
}
img.shadowed:after {
background: inherit;
content: "";
filter: blur(0.5em);
height: 100%;
opacity: 0.5;
position: absolute;
transform: scale(1.05);
width: 100%;
}
I tried to do the same with the video, but nothing worked. Please help, thank you in advance :)
Video block:
<video autoplay muted loop id="awesomeVideo">
<source src="video.mp4" type="video/mp4">
</video>
0
1 answers
I got this option - but it is perverse and slow, as I think I suspect that it will not work differently for the video
body {
background: black;
}
.video-block {
position: relative;
display: block;
width: 640px;
height: 360px;
margin: 10px;
}
.video-block video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.video-shadow {
filter: blur(1em);
z-index: 1;
}
<div class = 'video-block'>
<video autoplay muted loop id="awesomeVideo" class = "video-shadow">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
<video autoplay muted loop id="awesomeVideo" class = "video">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
</div>
Here the video is not played for some reason, but it looks like this locally:
2
Author: Zhihar, 2020-10-18 19:03:03