이건 swf 를 만들 때 제가 주구장창 사용하던 것인데 견문이 약해서인지 html-css 로 표현된 것이 없어서 회원님들과 공유합니다.

먼저 애프터이펙트에서 파티클 효과를 만들거나 또는 유튜브 등에서 뚱쳐 옵니다.

뚱친 동영상을 본인의 계정으로 업로드합니다. 동영상 길이가 너무 길면 동영상 편집 프로그램 등으로 30초 미만으로 잘라 주세요.

동영상주소 - https://blog.kakaocdn.net/dn/dhjKtp/btq42zLeYT5/0XKVXTxU11rUukpUBgi4x1/tfile.mp4

이미지를 만들 때는 동영상 가로 세로 비율과 똑같이 만들어 주세요. 유튜브의 경우 16:9 비율을 가지니 이미지도 이와 같이 만듭니다. 아니면 이미지 사이즈에 맞게 파티클 mp4 를 동영상 편집 프로그램으로 조절해도 됩니다.

이 비율이 맞지 않으면 그걸 맞출려고 또 css 등에서 "용"을 써야 합니다.

이미지주소 - https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg

스타일은 다이렉트로 주었으니 따로 빼내서 사용하실 분은 그렇게 하세요.

이 마법을 부리는 것은 mix-blend-mode:screen 이란 놈입니다. 포토샵에서 screen 효과와 같습니다.

동영상의 배경 검은색을 투명처리 해 줍니다.

<div style=width:이미지가로px;height:이미지세로px;background:url(이미지주소)>
    <video style=width:100%;mix-blend-mode:screen src=동영상주소 autoplay loop muted></video>
</div>

[code]

<div style=width:720px;height:405px;background:url(https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg)>
    <video style=width:100%;mix-blend-mode:screen src=https://blog.kakaocdn.net/dn/dhjKtp/btq42zLeYT5/0XKVXTxU11rUukpUBgi4x1/tfile.mp4 autoplay loop muted></video>
</div>

[/code]

위 소스를 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default 에서 확인해 보세요.

결과물 - http://www.mediaplayer.kr/main/tip/14