Динамическая тень от видео

Question

У меня есть видео и я хочу сделать динамическую тень от него. Я так и не смог этого сделать, но смог сделать это с изображением:

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%;
}

Я пытался сделать то же самое с видео, но ничего не получилось. Прошу помощи, заранее благодарен :)

Блок видео:

<video autoplay muted loop id="awesomeVideo">
  <source src="video.mp4" type="video/mp4">
</video>

Answer 1

У меня получился такой вариант - но он извратный и тормозной, как мне кажется подозреваю, что по другому для видео не получится

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>

Тут видео не проигрывается почему-то, но выглядит локально так:

БЛОГ НА HUSL

Динамическая тень от видео

Ответы (1 шт):