StickyVideo/ad.html at master · neerajd002/StickyVideo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <script type="text/javascript">var clickTag = "https://www.mercury.co.nz/"; </script>
  </head>
  <body style="overflow:hidden;">
    <div id="banner" style="width:320px;height:50px;margin:0 auto;"></div>
    <script type="text/javascript">
    var loadImages=function(a,d){if(a&&"string"==typeof a){var e=a;a=[];a.push(e)}if(a&&"object"==typeof a&&a.length){var c=function(c){f.push(this);f.length==a.length&&d(f)},f=[];document.querySelector("head");a.forEach(function(a){if(a&&"string"==typeof a&&a.length){var b=new Image;b.onload=c;b.src=a}})}},staticImages={bannerImage:"assets/320x50_banner.png",topFrameImage1:"assets/expandedAdAsset1.png"},assets=[];if(staticImages&&"object"==typeof staticImages)for(var i in staticImages)assets.push(staticImages[i]);
loadImages(assets,function(){var a=function(a,b,c){return"<div "+(b?'id="'+b+'"':"")+' style="'+(0==c?"":"opacity:0;-webkit-transition:all ease 0.5s;transition:all ease 0.5s;")+'position:absolute;top:0px;left:0px;width:100%;height:inherit;"><img src="'+a+'" style="max-width:100%;max-height:100%;position:relative;vertical-align:top;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);" /></div>'},d=document.querySelector("#banner");d.innerHTML=a(staticImages.bannerImage,
"bannerImage");var e='<div id="videoFrame" style="display:inline-block;position:relative;width:75%;height:inherit;"><video id="video" muted playsinline autoplay style="width:100%;height:100%;"></video><div id="skipAd" data-button="skipAd" style="position:absolute;top:0px;left:0px;width:30px;height:30px;padding:0 10px;background-color:rgba(255,255,255,0.5);font-family:sans-serif;text-transform:uppercase;font-weight:700;line-height:30px;font-size:12px;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all ease-out 0.5s;transition:all ease-out 0.5s;">SKIP</div><div id="fullscreen" data-button="fullscreen" style="position:absolute;top:0px;right:0px;width:30px;height:30px;background-size:cover;background-image:url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDY1MDZDNDQ2NUM3MTFFNkJCN0RFOUM1MTVENTZENzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDY1MDZDNDM2NUM3MTFFNkJCN0RFOUM1MTVENTZENzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTA2RDA5OUMzNjgxMTFFNjkxQzlEN0VERkM2MjlBOTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTA2RDA5OUQzNjgxMTFFNjkxQzlEN0VERkM2MjlBOTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7lhLipAAAGeUlEQVR42uxa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\')"></div><div id="progressBar" style="position:absolute;bottom:0px;left:0px;width:0%;height:10px;background-color:#fff100;opacity:0.75;-webkit-transition:width linear 0.25s;transition:width linear 0.25s;"></div></div><div id="contentFrame" style="display:inline-block;width:25%;height:inherit;position:absolute;">'+
a(staticImages.topFrameImage1,"topFrameImage1")+"</div>";a=document.createElement("div");a.style.cssText="position:relative;top:0px;left:0px;width:100%;height:100%;cursor:pointer;background-color:#000;";a.innerHTML=e;var c=document.createElement("iframe");c.width="100%";c.height=window.top.screen.width/376*159+"px";c.style.cssText="position:fixed;top:0px;left:0px;background-color:#fff;border:none;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all ease-out 0.5s;transition:all ease-out 0.5s;";
window.top.document.body.appendChild(c);e=c.contentWindow||c.contentDocument||c.contentDocument.document;e.document.body.innerHTML="";e.document.body.appendChild(a);e.document.body.style.cssText="margin:0px;padding:0px;width:100%;height:100%;";a.addEventListener("click",function(a){"button"in a.target.dataset||window.open(clickTag,"_blank")});d.addEventListener("click",function(a){"button"in a.target.dataset||window.open(clickTag,"_blank")});var f=a.querySelector("#topFrameImage1"),m=d.querySelector("#bannerImage"),
b=a.querySelector("#video"),n=a.querySelector("#progressBar"),h=a.querySelector("#skipAd");d=a.querySelector("#fullscreen");setTimeout(function(){f.style.opacity=1;m.style.opacity=1},500);var k=function(){setTimeout(function(){c.style.webkitTransform="";c.style.transform="";b.src="assets/expandedAdVideo1.mp4";setTimeout(function(){h.style.webkitTransform="";h.style.transform=""},3E3)},20)},l=function(){setTimeout(function(){c.style.webkitTransform="translateX(100%)";c.style.transform="translateX(100%)";
setTimeout(function(){b.src="";c.style.display="none"},500)},20)},g=!1;b.ontimeupdate=function(){n.style.width=b.currentTime/b.duration*100+"%"};b.onended=function(){l()};d.onclick=function(){b.muted=!1;b.requestFullscreen?b.requestFullscreen():b.mozRequestFullScreen?b.mozRequestFullScreen():b.webkitRequestFullscreen?b.webkitRequestFullscreen():b.msRequestFullscreen&&b.msRequestFullscreen()};h.onclick=function(){l()};window.top.document.body.addEventListener("touchmove",function(){g||(k(),g=!0)},
!1);window.top.addEventListener("scroll",function(){g||(k(),g=!0)},!1)});
    </script>
  </body>
</html>