Last active
July 19, 2018 15:41
-
-
Save samsjchi/dba68e924edf7ba91fc5d3ff6e6ae64f to your computer and use it in GitHub Desktop.
BBVA Compass Impact+ HD (Unit 2 w/ subtitles)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title><%= title="" %=""></%=></title> | |
<meta name="ad.size" content="width=300,height=250"> | |
<style> | |
body{margin:0;font-weight:100;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Segoe UI,Arial,sans-serif}a,body{color:#fff}a{text-decoration:none}h1,h2{margin:0;line-height:1.5}.c-video-wrapper{position:relative;height:0;width:100%;margin:0;float:left;overflow:hidden;z-index:1;transition-duration:.5s;transition-timing-function:ease-in-out;transition-property:opacity,-webkit-transform,-webkit-filter;transition-property:transform,filter,opacity;transition-property:transform,filter,opacity,-webkit-transform,-webkit-filter;opacity:.85;-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-filter:blur(5px);filter:blur(5px);padding-bottom:56.25%}@media (min-width:600px){.c-video-wrapper{padding-bottom:57%}}.is-viewable .c-video-wrapper{opacity:1;-webkit-transform:none;transform:none;-webkit-filter:blur(0);filter:blur(0)}.c-video{position:absolute;width:100%;height:100%;background:#fff}.c-content{width:100%;max-width:1024px;margin:0 auto;position:relative;overflow:hidden;background:#333}.c-audio-toggle{background:rgba(0,0,0,.5);border:1px solid #fff;border-radius:5px;cursor:pointer;display:inline-block;font-size:.4em;left:5px;letter-spacing:.05em;padding:.6em .8em;position:absolute;text-align:center;text-transform:uppercase;top:10px;width:12em;font-weight:400;z-index:100}.c-audio-toggle svg{display:inline-block;position:relative;top:.1em;width:1em;height:1em} | |
</style> | |
</head> | |
<body> | |
<div class="c-content"> | |
<div class="c-audio-toggle js-sound"> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" class="c-play-btn"><style>.st-play{fill:#fff}</style><path class="st-play" d="M832 352v1088c0 17.3-6.3 32.3-19 45s-27.7 19-45 19-32.3-6.3-45-19l-333-333H128c-17.3 0-32.3-6.3-45-19s-19-27.7-19-45V704c0-17.3 6.3-32.3 19-45s27.7-19 45-19h262l333-333c12.7-12.7 27.7-19 45-19s32.3 6.3 45 19 19 27.7 19 45zm384 544c0 50.7-14.2 97.8-42.5 141.5s-65.8 74.8-112.5 93.5c-6.7 3.3-15 5-25 5-17.3 0-32.3-6.2-45-18.5s-19-27.5-19-45.5c0-14 4-25.8 12-35.5s17.7-18 29-25 22.7-14.7 34-23 21-20.2 29-35.5 12-34.3 12-57-4-41.7-12-57-17.7-27.2-29-35.5-22.7-16-34-23-21-15.3-29-25-12-21.5-12-35.5c0-18 6.3-33.2 19-45.5s27.7-18.5 45-18.5c10 0 18.3 1.7 25 5 46.7 18 84.2 49 112.5 93s42.5 91.3 42.5 142zm256 0c0 102-28.3 196.2-85 282.5s-131.7 149.2-225 188.5c-8.7 3.3-17 5-25 5-18 0-33.3-6.3-46-19s-19-27.7-19-45c0-26 13-45.7 39-59 37.3-19.3 62.7-34 76-44 49.3-36 87.8-81.2 115.5-135.5 27.7-54.3 41.5-112.2 41.5-173.5s-13.8-119.2-41.5-173.5S1236.3 623 1187 587c-13.3-10-38.7-24.7-76-44-26-13.3-39-33-39-59 0-17.3 6.3-32.3 19-45s27.7-19 45-19c8.7 0 17.3 1.7 26 5 93.3 39.3 168.3 102.2 225 188.5s85 180.5 85 282.5zm256 0c0 153.3-42.3 294.2-127 422.5s-197.3 222.8-338 283.5c-8.7 3.3-17.3 5-26 5-17.3 0-32.3-6.3-45-19s-19-27.7-19-45c0-24 13-43.7 39-59 4.7-2.7 12.2-6.2 22.5-10.5s17.8-7.8 22.5-10.5c30.7-16.7 58-33.7 82-51 82-60.7 146-136.3 192-227s69-187 69-289-23-198.3-69-289-110-166.3-192-227c-24-17.3-51.3-34.3-82-51-4.7-2.7-12.2-6.2-22.5-10.5s-17.8-7.8-22.5-10.5c-26-15.3-39-35-39-59 0-17.3 6.3-32.3 19-45s27.7-19 45-19c8.7 0 17.3 1.7 26 5 140.7 60.7 253.3 155.2 338 283.5s127 269.2 127 422.5z"/></svg> | |
<span class="js-sound-label">Play with sound</span> | |
</div> | |
<a href="%%CLICK_URL_UNESC%%http://www.bbvacompass.com/wealth" target="_blank"> | |
<figure class="c-video-wrapper"> | |
<video class="c-video" playsinline="1" muted="1" poster="https://cdn.theatlantic.com/assets/media/files/advertising/bbva-compass/bbva-compass-2-poster.jpg"> | |
</video> | |
</figure> | |
</a> | |
</div> | |
<script type="text/javascript" inline=""> | |
"use strict";window.helpers=window.helpers||{},function(document,window,top,helpers){helpers.getViewability=function(){var clientRect=window.frameElement.getBoundingClientRect(),height=clientRect.height,elTop=clientRect.top,elBottom=clientRect.top+height,hiddenTop=Math.abs(Math.min(elTop,0)),hiddenBottom=Math.abs(Math.max(elBottom-top.innerHeight,0));return 100*(1-Math.min(hiddenTop+hiddenBottom,height)/height)}}(document,window,window.top,window.helpers); | |
</script> | |
<script type="text/javascript" inline=""> | |
"use strict";!function(document,window,top){function filterForIFrame(event){var id=event.slot.getSlotElementId();return top.document.getElementById(id).contains(window.frameElement)}var $=top.$;window.top.googletag.pubads().addEventListener("slotVisibilityChanged",function(event){filterForIFrame(event)&&$(window).trigger("slotVisibilityChanged",event)}),window.top.googletag.pubads().addEventListener("impressionViewable",function(event){filterForIFrame(event)&&$(window).trigger("impressionViewable",event)})}(document,window,window.top); | |
</script> | |
<script type="text/javascript" inline=""> | |
"use strict";var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target};!function(document,window,top){function loadPixel(src){var img=document.createElement("img");img.src=src,img.width=1,img.height=1,img.setAttribute("style","position: absolute; top: -1px; left: -1px; width:0; height:0; visibility:hidden;"),document.body.appendChild(img)}var $=top.$,gptAd=$(window.frameElement).closest("gpt-ad")[0];window.Analytics=function(options){this.options=options,this.interacted=!1,this.debug=!!top.location.search.match(/debug_custom_ads/),this._queue=[],this._recorded=[],this.bindEvents(),this.options.video&&this.bindVideoEvents(this.options.video),this.loadKeen(),this.device=function(){var ua=window.navigator.userAgent,w=window.screen.width,name="desktop";return w<1e3&&(name="tablet"),w<599&&(name="mobile"),ua.match(/iPad/)?name="tablet":ua.match(/iPhone/)?name="mobile":"desktop"===name&&ua.match("Android")&&(name="tablet"),name}(),window.KeenAsync.ready(function(){this.client=new window.KeenAsync({projectId:"58d28fc995cfc91c2b8e516e",writeKey:"C1F80F8637F4EE4B1272F54358B5517CC551ECA7296CEC2EC23FBD11AC31E1E70BD8527A1D945D9AB128B448FFC6C9BE185244996C6C5D9C82BD966F96506D3AC73E0A427FE8C7F466B6E2E5699DB82E9FF5AFA729CAC36ADE0DA096F936202F"}),this.executeQueue()}.bind(this))},window.Analytics.prototype.bindEvents=function(){function trackImpression(){setTimeout(function(){var metrics=window.performance.timing,init=window.performance.timing.fetchStart;self.record("impression",{perf_dom_interactive:metrics.domInteractive-init,perf_dom_complete:metrics.domComplete-init,perf_response:metrics.responseEnd-init,perf_load:metrics.loadEventEnd-init},!0)},250)}var self=this;window.performance.timing.loadEventEnd>0?trackImpression():$(window).on("load",trackImpression),$(window).one("impressionViewable",function(){self.record("viewable-impression",null,1)}),$(document).on("click",function(){self.record("click",null,!1,!0)}),$(gptAd).on("click",function(){self.record("click",null,!1,!0)}),$(document).on("click","[href]",function(){self.record("click-link",null,!1,!0)}),$(gptAd).on("click","[href]",function(){self.record("click-link",null,!1,!0)}),$(document).one("mouseenter",function(){self.record("hover",null,!1,!0)}),$(gptAd).one("mouseenter",function(){self.record("hover",null,!1,!0)}),$(document).on("submit",function(){self.record("form-submit",null,!1,!0)})},window.Analytics.prototype.executeQueue=function(){for(var i=0;i<this._queue.length;i++)this.record.apply(this,this._queue[i])},window.Analytics.prototype.loadKeen=function(){this.client=null,function(name,path,ctx){var latest,prev=!!window.Keen&&window.Keen;ctx[name]=ctx[name]||{ready:function(fn){var loaded,h=document.getElementsByTagName("head")[0],s=document.createElement("script"),w=window;s.onload=s.onerror=s.onreadystatechange=function(){if(!(s.readyState&&!/^c|loade/.test(s.readyState)||loaded)){if(s.onload=s.onreadystatechange=null,loaded=1,latest=w.Keen,prev)w.Keen=prev;else try{delete w.Keen}catch(e){w.Keen=void 0}ctx[name]=latest,ctx[name].ready(fn)}},s.async=1,s.src="https://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.1.3.min.js",h.parentNode.insertBefore(s,h)}}}("KeenAsync",0,window)},window.Analytics.prototype.record=function(name,data,unique,isInteraction){if(!this.client)return void this._queue.push(arguments);if(!(unique&&this._recorded.indexOf(name)>-1)){var isFirstInteraction=!1;isInteraction&&!this.interacted&&(isFirstInteraction=!0,this.interacted=!0),this._recorded.push(name);var pixelData=_extends({eventName:name,documentTitle:document.title,isInteraction:isInteraction,isFirstInteraction:isFirstInteraction,deviceCategory:this.device,deviceUserAgent:window.navigator.userAgent,gptCreativeId:gptAd.creativeId,gptCampaignId:gptAd.campaignId,gptLineItemId:gptAd.lineItemId,gptAdvertiserId:gptAd.advertiserId},this.options.extra||{},data||{}),params=[];for(var key in pixelData)pixelData[key]&¶ms.push(key+"="+encodeURIComponent(pixelData[key]));params=params.join("&");loadPixel("https://data-cdn.theatlantic.com/custom-ads.gif?"+params),data=_extends({eventName:name,documentTitle:document.title,isInteraction:isInteraction,isFirstInteraction:isFirstInteraction,device:{category:this.device,userAgent:window.navigator.userAgent},gpt:{creativeId:gptAd.creativeId,campaignId:gptAd.campaignId,lineItemId:gptAd.lineItemId,advertiserId:gptAd.advertiserId},extra:this.options.extra||{}},data||{}),this.debug&&(console.debug("Tracking:"),console.debug(data)),void 0===window.___browserSync___&&this.client.recordEvent("custom-ad-event",data)}},window.Analytics.prototype.bindVideoEvents=function(video){var self=this,$el=$(video.el,document);if(0!==$el.length){var getProgressData=function(e){return{sound:e.target.muted,filename:e.target.src}},getVersion=function(){var version="autoplay";return video.expandedCondition&&video.expandedCondition()&&(version="full"),version};$el.one("play",function(e){self.record("video-play",{filename:e.target.src})}),$el.on("stalled",function(e){self.record("video-stalled",{filename:e.target.src})}),$el.on("ended",function(e){self.record(getVersion()+"-video-progess-100",getProgressData(e),!0),$el.one("timeupdate",function(){self.record(getVersion()+"-video-loop",{filename:e.target.src})})}),$el.on("timeupdate",function(e){e.target.muted||self.record("video-unmuted",null,!0,!0);var position=Math.ceil(e.target.currentTime/e.target.duration*100);e.target.duration-e.target.currentTime<1&&(e.target._isLooping=!0);var version=getVersion(),data=getProgressData(e);100===position||position<e.target._isLooping?self.record(version+"-video-progess-100",data,!0):position>90?self.record(version+"-video-progess-90",data,!0):position>75?self.record(version+"-video-progess-75",data,!0):position>50?self.record(version+"-video-progess-50",data,!0):position>25&&self.record(version+"-video-progess-25",data,!0)})}}}(document,window,window.top); | |
</script> | |
<script type="text/javascript" inline=""> | |
"use strict";!function(document,window,top,helpers){function inlineVideo(){var width=$(window).width();source=mobileVideoLoop,width>680&&(source=desktopVideoLoop),video.setAttribute("src",source),video.muted=!0}function setHeight(){var el=document.getElementsByClassName("c-content")[0],height=el.getBoundingClientRect().height;window.frameElement.style.height=height+"px"}function updateMuteLabel(){var label=video.muted?"Play with sound":"Mute sound";soundLabel.innerText=label}function toggleVideoSource(){if(_isFullVideoPlaying=!0,source===mobileVideoLoop)source=mobileVideo;else{if(source!==desktopVideoLoop)return;source=desktopVideo}video.setAttribute("src",source),video.play()}var $=top.$;window.frameElement.style.width="100%";var video=$(".c-video",document)[0],soundLabel=$(".js-sound-label",document)[0],assetsUrl="https://cdn.theatlantic.com/assets/media/files/advertising/bbva-compass",mobileVideoLoop=assetsUrl+"/bbva2-loop-subtitles-mobile.mp4",desktopVideoLoop=assetsUrl+"/bbva2-loop-subtitles-desktop.mp4",mobileVideo=assetsUrl+"/bbva2-subtitles-mobile.mp4",desktopVideo=assetsUrl+"/bbva2-subtitles-desktop.mp4",source=void 0,_isFullVideoPlaying=!1;new window.Analytics({video:{el:$(".c-video",document),isFullVideoPlaying:function(){return _isFullVideoPlaying}}}),$(document).on("click",".js-sound",function(){video.muted=!video.muted,updateMuteLabel(),toggleVideoSource()}),video.onended=function(){video.muted=!0,updateMuteLabel(),video.play()},window.onresize=setHeight,$(window).on("slotVisibilityChanged",function(e,data){var shouldPlay=data.inViewPercentage>50,shouldPause=data.inViewPercentage<20;shouldPlay&&video.paused?($("body",document).addClass("is-viewable"),video.play()):shouldPause&&!video.paused&&setTimeout(function(){video.muted=!0,updateMuteLabel(),video.pause(),$("body",document).removeClass("is-viewable")},1500)}),window.onload=function(){setHeight(),inlineVideo(),helpers.getViewability()>50&&$("body",document).addClass("is-viewable")}}(document,window,window.top,window.helpers||{}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment