<div id=mainDiv style=width:100%;overflow:hidden>
<div id=imgDiv style=width:100%;height:100%;cursor:pointer;background-size:contain;background-image:url(https://blog.kakaocdn.net/dn/wot1z/btrdkOsGxcx/S0pjTDpGx0uLnzCHNxKAAK/img.jpg)>
<video id=videoPlayer style=width:100%;mix-blend-mode:screen;display:block src=https://blog.kakaocdn.net/dn/c07nfJ/btrdmAHtO9f/zLh5ghgQVVa5vgDES5a4e1/tfile.mp4 loop muted></video>
<audio id=audioPlayer src=https://blog.kakaocdn.net/dn/dBuOu2/btrdivHnfKM/bvMaixvAJUK3CN1LAL2oO0/tfile.mp3 loop></audio>
</div>
</div>
<script>
playerMode = 1;
mainDiv.onclick = function() {
if (playerMode) { audioPlayer.play(), videoPlayer.play(), imgDiv.style.backgroundImage = "url(https://blog.kakaocdn.net/dn/dpxDdN/btrdj677VT5/FP3chnNKIkRUSzrnNxCxXk/img.jpg)", playerMode = 0; }
else { audioPlayer.pause(), videoPlayer.pause(), imgDiv.style.backgroundImage = "url(https://blog.kakaocdn.net/dn/wot1z/btrdkOsGxcx/S0pjTDpGx0uLnzCHNxKAAK/img.jpg)", playerMode = 1; }
}
onresize = function() { mainDiv.style.height = mainDiv.offsetWidth * 540 / 960 + "px"; }
onresize();
</script>