Page Overlay

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page View/Overlay </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>


body {  background-image:url('file:///C:/Users/Utilizador/Desktop/LINKS/YOUTUBE/praia.jpg');
        background-size:100% 100%;background-attachment:fixed;
        margin:0;overflow:hidden;   }


#audio {  width:400px;outline:none;border:10px solid red;
          border-radius:50px;position:absolute;top:50%;left:50%;
          transform:translate(-50%,-50%);
          padding:20px;background-color:olive;       }

#opaque {  width:100%;height:100%;
           position:absolute;top:0;left:0;    }


</style>
</head>
<body>


<audio id='audio' controls>
<source src="file:///C:/Users/Utilizador/Desktop/LINKS/PIPOCA%20BEACH/audio.mp3" type="audio/mpeg"></audio>


<overlay id='opaque'></overlay>


<script>
i=0;

opaque = document.getElementById('opaque');

opaque.addEventListener('click', function(){
alert('We are so sorry.\nThe spot you are clicking on is nothing more than a crappy page overlay.\nPlease leave.');
location.replace("https://www.youtube.com/");
});


</script>
</body>
</html>