Created
September 4, 2018 21:45
-
-
Save samsjchi/30988712f3a503e2eb55c479c6ba2279 to your computer and use it in GitHub Desktop.
HBO's "The Deuce" Cineflex Unit 2 (Tonight)
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> | |
| <style> | |
| body{margin:0}.c-content{background:#000;overflow:hidden;margin:0;padding-bottom:56.25%;height:0}.c-video-wrapper{margin:0;width:100%}.c-video{display:block;width:100%}.disable-cropping{-webkit-transform:scale(.7);transform:scale(.7);-webkit-transform-origin:top;transform-origin:top;background-color:#000} | |
| </style> | |
| <div class="js-external-css"> | |
| <style> | |
| .cf-l-placeholder{position:relative;height:0}@media (min-height:640px){.cf-l-placeholder{transition:height .25s ease-in}}.cf-l-overlay{position:absolute;z-index:1000000;bottom:0;left:0;width:100%;height:120px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Segoe UI,Arial,sans-serif;background-image:linear-gradient(transparent,rgba(0,0,0,.006) 9.7%,rgba(0,0,0,.026) 19%,rgba(0,0,0,.06) 27.5%,rgba(0,0,0,.104) 34.9%,rgba(0,0,0,.156) 41.4%,rgba(0,0,0,.211) 47.3%,rgba(0,0,0,.267) 52.8%,rgba(0,0,0,.324) 58.2%,rgba(0,0,0,.381) 63.6%,rgba(0,0,0,.438) 69.1%,rgba(0,0,0,.494) 74.8%,rgba(0,0,0,.548) 80.7%,rgba(0,0,0,.601) 86.9%,rgba(0,0,0,.652) 93.4%,rgba(0,0,0,.7))}.cf-c-controls{background:rgba(0,0,0,.5);display:inline-block;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;color:#fff;font-size:13px;border-radius:.25em;padding:.5em 1.1em;margin-top:6em;opacity:0;position:relative;top:25px;transition:all .2s linear}.cf-c-controls a{color:#fff;text-decoration:none}.cf-is-viewable .cf-c-controls{opacity:1;top:0}.cf-c-controls__item{display:inline-block;padding:0 1em}.cf-c-controls__item--sound{cursor:pointer;transition:text-shadow .2s linear;margin-right:1em}.cf-c-controls__item--sound:hover{text-shadow:0 0 15px #fff}.cf-c-controls__item--scroll{display:none;background:none}@media (min-width:800px){.cf-c-controls__item--scroll{display:inline-block}}.cf-o-play-btn{height:1.2em;width:1.2em}.cf-o-play-btn,.cf-o-scroll-arrow{display:inline-block;vertical-align:middle;margin-right:.25em;position:relative;bottom:1px}.cf-o-scroll-arrow{height:1em;width:1em}.cf-c-link{position:absolute;width:100%;height:100%;z-index:100;left:0;top:0} | |
| </style> | |
| </div> | |
| </head> | |
| <body> | |
| <div class="c-content"> | |
| <figure class="c-video-wrapper"> | |
| <video class="c-video" playsinline="1" muted="1" poster="https://cdn.theatlantic.com/assets/media/files/advertising/hbo/deuce-poster.jpg"> | |
| </video> | |
| </figure> | |
| </div> | |
| <div class="cf-l-placeholder"> | |
| <a class="cf-c-link" href="%%CLICK_URL_UNESC%%https://www.hbo.com/the-deuce/" target="_blank"></a> | |
| <div class="cf-l-overlay"> | |
| <div class="cf-c-controls cf-c-controls__item--sound cf-js-sound"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" class="cf-o-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="cf-js-sound-label">Play with sound</span> | |
| </div> | |
| <div class="cf-c-controls cf-c-controls__item--scroll"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.17 7.67" class="cf-o-scroll-arrow"><style>.st-scroll{fill:#fff;}</style><path class="st-scroll" d="M5.38,7.38.29,2.29A1,1,0,0,1,.29.88L.88.29a1,1,0,0,1,1.41,0l3.8,3.8L9.88.29a1,1,0,0,1,1.41,0l.59.59a1,1,0,0,1,0,1.41L6.79,7.38a1,1,0,0,1-1.41,0Z"/></svg> | |
| <a href="#site">Scroll down to TheAtlantic.com</a> | |
| </div> | |
| </div> | |
| </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){function inlineVideo(){var width=top.innerWidth,source=mobileVideo;width>680&&(source=desktopVideo),width>1500&&(source=giantVideo),video.setAttribute("src",source),video.muted=!0}function updateMuteLabel(){var label=video.muted?"Play with sound":"Mute sound";soundLabel.innerText=label}function toggleSound(){video.muted=!video.muted,video.muted||(video.currentTime=0,video.autoplay=!1),updateMuteLabel()}function playVideo(){document.body.classList.add(inViewClass),placeholder.classList.add(externalInViewClass),video.play()}function pauseVideo(){video.pause(),document.body.classList.remove(inViewClass),placeholder.classList.remove(externalInViewClass)}function handleScroll(){var position=window.top.pageYOffset,limit=Math.max(.85*height,height-200),shouldPlay=position<limit;shouldPlay&&video.paused?playVideo():shouldPlay||video.paused||!autoplayInViewOnly||pauseVideo()}function handleZoomOut(){if(!canCropVideo){window.top.innerWidth/window.top.innerHeight>16/9?document.body.classList.add("disable-cropping"):document.body.classList.remove("disable-cropping")}}var $=top.$,canCropVideo=!0,assetsUrl="https://cdn.theatlantic.com/assets/media/files/advertising/hbo",mobileVideo=assetsUrl+"/deuce-tonight-mobile.mp4",desktopVideo=assetsUrl+"/deuce-tonight-desktop.mp4",giantVideo=assetsUrl+"/deuce-tonight-massive.mp4",video=document.querySelector(".c-video"),gptAd=$(window.frameElement).closest("gpt-ad")[0],frame=window.frameElement,placeholder=document.querySelector(".cf-l-placeholder"),soundBtn=document.querySelector(".cf-js-sound"),soundLabel=document.querySelector(".cf-js-sound-label"),externalCSS=document.querySelector(".js-external-css").children[0],autoplayInViewOnly=!1,height=0,inViewClass="is-viewable",externalInViewClass="cf-is-viewable";new window.Analytics({video:{el:$(".c-video",document)}}),video.onended=function(){video.muted=!0,updateMuteLabel(),video.play()};var setHeight=function(){requestAnimationFrame(function(){var el=document.getElementsByClassName("c-content")[0];height=el.getBoundingClientRect().height,frame.style.width="100%",frame.style.height=height+"px",gptAd.style.setProperty("display","block","important"),frame.style.position="fixed",frame.style.top=0,frame.style.left=0,frame.style.zIndex=-100,placeholder.style.height=height+"px",frame.style.maxHeight="95vh",placeholder.style.maxHeight="95vh",playVideo()})},handleOnLoad=function(){setHeight(),inlineVideo()};handleZoomOut();var bindListeners=function(){window.onload=handleOnLoad,window.onresize=setHeight,window.top.addEventListener("scroll",handleScroll,{passive:!0}),soundBtn.addEventListener("click",toggleSound),window.addEventListener("resize",handleZoomOut)};!function(){placeholder.remove(),externalCSS.remove(),window.top.document.head.appendChild(externalCSS),gptAd.appendChild(placeholder),bindListeners()}()}(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