Dynamic shadow from the video

Question

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

html javascript css jquery веб-программирование

Author: wilddip, 2020-10-18

Source

1 answers

score 2 · Answer 1

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: