Created
September 10, 2018 21:04
-
-
Save samsjchi/2f7102ceab5c32033e829b8744ffd8d6 to your computer and use it in GitHub Desktop.
FM Global Impact+ Video Unit
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:40%}}@media (min-width:1440px){.c-video-wrapper{padding-bottom:33%}}.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:#000}.c-content{width:100%;max-width:1680px;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%%https://www.fmglobal.com/" target="_blank"> | |
<figure class="c-video-wrapper"> | |
<video class="c-video" playsinline="1" muted="1" poster="https://cdn.theatlantic.com/assets/media/files/advertising/fm-global/poster-v2.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.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.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.record=function(name,data,unique,isInteraction){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),this.debug&&(console.debug("Tracking:"),console.debug(pixelData))}},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=mobileVideo;width>680&&(source=desktopVideo),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 play(){clearTimeout(_pauseTimer),$("body",document).addClass("is-viewable"),video.paused&&video.play()}function pause(){helpers.getViewability()>pauseThreshold||video.paused||(video.muted=!0,$("body",document).removeClass("is-viewable"),updateMuteLabel(),video.pause())}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/fm-global",mobileVideo=assetsUrl+"/mobile.mp4",desktopVideo=assetsUrl+"/desktop.mp4",pauseThreshold=10;new window.Analytics({video:{el:$(".c-video",document)}}),$(document).on("click",".js-sound",function(){video.muted=!video.muted,updateMuteLabel()}),video.onended=function(){video.muted=!0,updateMuteLabel(),video.play()},window.onresize=setHeight;var _pauseTimer=null;$(window).on("slotVisibilityChanged",function(e,data){var shouldPlay=data.inViewPercentage>50,shouldPause=data.inViewPercentage<pauseThreshold;shouldPlay&&play(),shouldPause&&(_pauseTimer=setTimeout(pause,5e3))}),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