Skip to content

Instantly share code, notes, and snippets.

@mokoshalb

mokoshalb/aoa.html

Created October 4, 2021 09:01
Show Gist options
  • Save mokoshalb/a3907ea09b010b62f60429b5d6ddef24 to your computer and use it in GitHub Desktop.
Save mokoshalb/a3907ea09b010b62f60429b5d6ddef24 to your computer and use it in GitHub Desktop.
Download ZIP
Ads over video player for iframe and hls players
Raw
aoa.html
<html>
<head>
<title>Ads Over Content</title>
<style>
.aoa_wrap{position:relative;z-index:999;max-width:100%;max-height:100%;overflow:hidden;margin:10px}
.aoa_overlay{display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,.8);z-index:9999;color:#fff;overflow:hidden}
.aoa_content{display:inline-block;width:100%;text-align:center;vertical-align:middle;overflow:hidden;position:relative;top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.aoa_close_btn{cursor:pointer;display:block;height:16px;width:16px;position:absolute;top:50%;right:50%;background:red;color:#fff;line-height:16px;font-size:12px;text-decoration:none !important;text-align:center;font-weight:700;-webkit-border-radius:50px;-moz-border-radius:50px;-o-border-radius:50px;border-radius:50px}
</style>
<script>
function hide(){
document.getElementById(aoa).style.display = none;
}
</script>
</head>
<body>
<div class='aoa_wrap'>
<!-- Player, iframe location -->
<div class='aoa_overlay' id='aoa'>
<div class='aoa_content'>
<img src="https://dummyimage.com/600/aaa/fff" height="300px">
</div>
<a class='aoa_close_btn' onclick='hide();'>X</a>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment