video screen effect 효과 반응형

<style>
.effect-div { width:100%; background-size:cover; overflow:hidden; position:relative; }
.effect-div video { width:100%; mix-blend-mode:screen; }
</style>
<div class=effect-div style="background-image:url('https://blog.kakaocdn.net/dna/eBj8M6/btryph8yOfm/AAAAAAAAAAAAAAAAAAAAADoXN4wtpy9zNER_8SUCxC3ZK39bGqPWK6ixTIM5LpeI/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1769871599&allow_ip=&allow_referer=&signature=OFQAsCUHwtd7Zl3TkUD6EV2PL7I%3D')">
<video src="https://v4.cdnpk.net/videvo_files/video/free/video0485/large_watermarked/_import_61b4426beee026.13798649_FPpreview.mp4" autoplay loop muted></video>
</div>
<script>
onresize = function() {
for (effect_div of document.getElementsByClassName("effect-div")) effect_div.style.height = effect_div.offsetWidth * 9 / 16 + "px";
}
onresize();
</script>

결과