Skip to content

Instantly share code, notes, and snippets.

View samsjchi's full-sized avatar

Sam Chi samsjchi

56 followers · 81 following
  • New York, NY
View GitHub Profile
@samsjchi
samsjchi / uber-cineflex.html
Last active October 10, 2018 20:27
Uber Cineflex Unit
<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%}
</style>
<div class="js-external-css">
<style>
@samsjchi
samsjchi / uber-impact-video-sidebar.html
Last active September 26, 2018 18:57
Uber Impact+ Video w/ Sidebar
<html>
<head>
<title><%= title="" %=""></%=></title>
<meta name="ad.size" content="width=300,height=250">
<style>
body{margin:0;color:#000;font-weight:100;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Segoe UI,Arial,sans-serif}a{color:#fff;text-decoration:none}h1,h2{margin:0;line-height:1.5}.c-content{width:100%;max-width:1325px;margin:0 auto;position:relative;overflow:hidden;background:#333}.c-link{display:block}@media (min-width:740px){.c-link{height:100%}}.c-link svg{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-height:100%;width:100%}@media (max-width:740px){.c-link svg{top:0;left:0;position:relative;-webkit-transform:none;transform:none;height:auto;max-width:250px;margin:0 auto;display:block}}.c-dek{font-size:1em;font-weight:500}.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:10px;letter-spacing:.05em;padding:.6em .8em;p
@samsjchi
samsjchi / att-cineflex.html
Last active September 17, 2018 16:50
AT&T Cineflex Unit 1 (Matcha)
<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>
@samsjchi
samsjchi / hbo-deuce-impact-video.html
Last active September 12, 2018 19:42
HBO's "The Deuce" Impact Video Unit (Sunday)
<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);fi
@samsjchi
samsjchi / fm-global-impact-video.html
Created September 10, 2018 21:04
FM Global Impact+ Video Unit
<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);fi
@samsjchi
samsjchi / hbo-deuce-cineflex-2.html
Created September 4, 2018 21:45
HBO's "The Deuce" Cineflex Unit 2 (Tonight)
<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>
@samsjchi
samsjchi / hbo-deuce-cineflex-1.html
Created September 4, 2018 21:34
HBO's "The Deuce" Cineflex Unit 1 (Sunday)
<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>
@samsjchi
samsjchi / showtime-cineflex-0916.html
Created August 28, 2018 16:36
Showtime Cineflex Unit (9/16)
<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>
@samsjchi
samsjchi / showtime-cineflex-0907.html
Last active August 28, 2018 16:37
Showtime Cineflex Unit (9/7)
<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>
@samsjchi
samsjchi / annapurna-cineflex.html
Last active August 27, 2018 17:50
Annapurna (Operation Finale) Cineflex Unit
<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>