object { outline:none; } html, body { height:100%; -webkit-font-smoothing: antialiased; font-family: Helvetica, Arial, sans-serif; } body { margin:0; padding:0; overflow:hidden; } button { background: rgba(0,0,0,0.7); border: 0; color: #EEE; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; font-size: 16px; padding: 10px; outline:none; width: 130px; float:right; } button:hover { cursor: pointer; } a { color: #FFF; text-decoration: none; } #video-container1 { width: 100%; height: 100%; position: relative; } #video-controls1 { position: absolute; top: 30px; right: 30px; opacity: 0; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; -ms-transition: opacity .3s; transition: opacity .3s; } #video-container1:hover #video-controls1 { opacity: .9; } .textarea0 { background: rgba(0,0,0,0.7); border: 0; color: #EEE; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; font-size: 14px; padding: 10px; outline:none; width: 110px; margin-top: -8px; margin-bottom: 12px; } .textarea0a { font-weight: bold; } .textarea1 { background: rgba(0,0,0,0.9); border: 0; color: #EEE; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; font-size: 12px; padding: 20px; resize:none; width: 400px; display: none; overflow-y: hidden; margin: 10px; font-family: Helvetica, Arial, sans-serif; text-align: left; } .textarea2 { background: rgba(0,0,0,0.9); border: 0; color: #EEE; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; font-size: 12px; padding: 20px; resize:none; width: 400px; display: none; overflow-y: hidden; margin: 10px; font-family: Helvetica, Arial, sans-serif; text-align: left; } .textarea3 { background: rgba(0,0,0,0.9); border: 0; color: #EEE; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; font-size: 12px; padding: 20px; resize:none; width: 400px; display: none; overflow-y: hidden; margin: 10px; font-family: Helvetica, Arial, sans-serif; text-align: left; } .vidWidth { width:100%; height:100%; } .video-container1 { min-height:100%; min-width:100%; height:100%; width:100%; } .border { border:0px; margin-left:29px; } #aicon:hover { cursor:pointer; } .fallback { width:100%; height:100%; display:block; background-image:url(https://s-media.nyc.gov/screenshot/); background-repeat:no-repeat; overflow:hidden; text-align: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .fallback_span { width:160px; height:90px; display:table; background-image:url(https://a002-vod.nyc.gov/html/images/click.png); background-repeat:no-repeat; position:relative; top:50%; left:50%; margin-left:-80px; margin-top:-45px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } @media only screen and (max-height: 380px) { #video-controls1 { transform-origin: top right; scale: 0.9; -ms-transform: scale (0.9); -webkit-transform:scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); } } @media only screen and (max-height: 320px) { #video-controls1 { transform-origin: top right; scale: 0.8; -ms-transform: scale (0.8); -webkit-transform:scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); } } @media only screen and (max-height: 260px) { #video-controls1 { transform-origin: top right; scale: 0.7; -ms-transform: scale (0.7); -webkit-transform:scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); } } @media only screen and (max-height: 200px) { #video-controls1 { transform-origin: top right; scale: 0.6; -ms-transform: scale (0.6); -webkit-transform:scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); } }