<body>
<div class="video">
<video autoplay muted src="https://youtu.be/pGbIOC83-So"></video>
</div>
<div class="backlight">
<video autoplay muted src="https://youtu.be/pGbIOC83-So"></video>
</div>
</body>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{background: #000;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.video{
position: absolute;
width: 50%;
z-index: 1;
}
.backlight{
width: calc(50% + 50px);
filter: blur(38px);
}
.backlight::before{
content: "";
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, transparent calc(100% - 14px), black 100%),
linear-gradient(180deg, transparent calc(100% - 14px), black 100%),
linear-gradient(90deg, transparent calc(100% - 25px), black 100%),
linear-gradient(270deg, transparent calc(100% - 25px), black 100%);
}
video{
display: block;
width: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.