/** Code By Webdevtrick [ //webdevtrick.com ] **/ @import url[//weloveiconfonts.com/api/?family=fontawesome]; [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; } body { background: #e8eaed; font: 16px/1.5 "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; } img { max-width: 100%; } h2 { font-weight: 400; font-size: 1.5rem; } a { color: inherit; text-decoration: none; box-shadow: inset 0px -1px 0px rgba[255, 255, 255, 0.5]; transition: all 0.5s; } a:hover { box-shadow: inset 0px -24px 0px #61b5d9; } .wrapper { margin: 0 auto; padding: 0 1em; max-width: 69rem; } .truncate, .video-title, .single-video-title, .single-video-info { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .video-area { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; color: #fff; padding: 4.5rem 0; } .video-column { float: left; max-width: 854px; } .video-player { background: #000; position: relative; overflow: hidden; width: 100%;
height: 480px; } .video { display: block; cursor: pointer; width: 100%; position: relative; top: 50%; -webkit-transform: translateY[-50%]; transform: translateY[-50%]; } .playlist { float: right; font-size: 18px; font-weight: 600; max-width: 250px; } .video-header { background: #e60023; line-height: 1.5rem; padding: 1.5rem; } .video-title { float: left; margin: 0; width: auto; max-width: 75%; } .video-author { font-size: 18px; float: left; margin-left: 3rem; } .description { color: #212121; } .video-author a:hover { box-shadow: inset 0px -24px 0px #212121; } .video-controls { box-sizing: border-box; background: rgb[33,33,33, 0.8]; line-height: 3rem; padding: 0 1.5rem; position: absolute; bottom: 0; -webkit-transform: translate3d[0, 3rem, 0]; transform: translate3d[0, 3rem, 0]; width: 100%; height: 3rem; vertical-align: middle; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .video-controls button { background: 0; border: 0; color: #fff; font-size: 1.5rem; width: 3rem; height: 3rem; vertical-align: middle; } .video-player:hover .video-controls { -webkit-transform: translate3d[0, 0, 0]; transform: translate3d[0, 0, 0]; } .video-bars { background: rgb[33,33,33, 0.8]; display: inline-block; margin: 0 1em; position: relative; width: 73%; height: 8px; } .bar-seeker, .bar-progress, .bar-buffer { position: absolute; height: 8px; } .bar-seeker { z-index: 1000; } .bar-progress { z-index: 100; } .bar-buffer { z-index: 10; } input[type=range] { background: transparent; cursor: pointer; -webkit-appearance: none; width: 100%; } input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; } input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } .bar-seeker::-ms-fill-lower { background: transparent; } .bar-seeker::-ms-fill-upper { background: transparent; } .bar-seeker::-webkit-slider-runnable-track { background: transparent; height: 8px; padding: 0; } .bar-seeker::-moz-range-track { background: transparent; height: 8px; padding: 0; } .bar-seeker::-ms-track { background: transparent; height: 8px; padding: 0; } .bar-seeker::-webkit-slider-thumb { background: #ff3c3c; border: 0; border-radius: 100%; width: 18px; height: 18px; margin-top: -4px; } .bar-seeker::-moz-range-thumb { background: #ff3c3c; border: 0; border-radius: 100%; width: 18px; height: 18px; margin-top: -4px; } .bar-seeker::-ms-thumb { background: #ff3c3c; border: 0; border-radius: 100%; width: 18px; height: 18px; margin-top: -4px; } @media all and [-ms-high-contrast: none], [-ms-high-contrast: active] { .bar-seeker { height: 24px; margin-top: -5px; padding: 0; vertical-align: middle; } } input.slider-volume { position: absolute; bottom: 36px; right: -40px; width: 6rem; opacity: 0; -webkit-transform: rotate[-90deg] scaleX[0]; transform: rotate[-90deg] scaleX[0]; -webkit-transform-origin: left; transform-origin: left; transition: all 1s; } .slider-volume::-webkit-slider-runnable-track { background: rgb[33,33,33, 0.8]; height: 20px; } .slider-volume::-moz-range-track { background: rgb[33,33,33, 0.8]; height: 20px; } .slider-volume::-ms-track { background: rgb[33,33,33, 0.8]; height: 20px; } .slider-volume::-webkit-slider-thumb { background: #ff3c3c; border: 0; width: 8px; height: 24px; margin-top: -2px; } .slider-volume::-moz-range-thumb { background: #ff3c3c; border: 0; width: 8px; height: 24px; margin-top: -2px; } .slider-volume::-ms-thumb { background: #ff3c3c; border: 0; width: 8px; height: 24px; margin-top: -2px; } .btn-sound:hover + .slider-volume, .slider-volume:hover { opacity: 1; -webkit-transform: rotate[-90deg] scaleX[1]; transform: rotate[-90deg] scaleX[1]; } progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; color: rgba[255, 255, 255, 0.2]; border: none; height: 8px; width: 100%; } progress::-webkit-progress-bar { background: transparent; } progress::-webkit-progress-value { background: transparent; } .bar-buffer::-webkit-progress-value { background: rgba[255, 255, 255, 0.2]; } .bar-buffer::-moz-progress-bar { background: rgba[255, 255, 255, 0.2]; } .bar-progress::-webkit-progress-value { background: #ff3c3c; } .bar-progress::-moz-progress-bar { background: #ff3c3c; } .bar-progress { color: #ff3c3c; } .btn-replay { background: none; border: none; display: none; color: #ff3c3c; position: absolute; top: 50%; left: 50%; margin-left: -110px; margin-top: -110px; font-size: 9rem; width: 220px; height: 220px; } .time-bubble { background: #61b5d9; border-radius: 1.5rem 1.5rem 0px; height: 1.5rem; line-height: 1.5rem; position: absolute; bottom: 3.2rem; left: 4.8rem; padding: 0.5em; display: none; } .next { background: #212121; padding: 16.5px; max-height: 60px; } .next-video { display: block; height: 140px; position: relative; overflow: hidden; } .next-video img { display: block; } .next-video::before { background: linear-gradient[0deg, rgb[33,33,33, 0.8] 0%, transparent 60%]; content: ""; width: 100%; height: 100%; position: absolute; transition: all 0.5s; } .single-video-title { position: absolute; -webkit-transform: translateY[-4.5rem]; transform: translateY[-4.5rem]; padding: 0.75rem 1.5rem; transition: all 0.5s; } .single-video-info { box-sizing: border-box; font-size: 14px; font-weight: 400; padding: 0.75rem 1.5rem; position: absolute; -webkit-transform: translateY[-6.75rem]; transform: translateY[-6.75rem]; transition: all 0.5s; opacity: 0; width: 100%; } .next-video:hover .single-video-title { -webkit-transform: translateY[-9.75rem]; transform: translateY[-9.75rem]; } .next-video:hover::before { background: rgb[33,33,33, 0.7]; } .next-video:hover .single-video-info { opacity: 1; } .played-video { -webkit-transform: scale[0]; transform: scale[0]; height: 0; width: 0; } .info-area { background: #fff; color: #212121; } .info-heading { color: #61b5d9; font-size: 3rem; font-weight: 300; text-align: center; margin: 4.5rem auto; } .clearfix:before, .wrapper:before, .video-header:before, .clearfix:after, .wrapper:after, .video-header:after { content: " ";
display: table; } .clearfix:after, .wrapper:after, .video-header:after { clear: both; } @-webkit-keyframes bottomSlide { 0% { -webkit-transform: translate3d[0, 100%, 0]; transform: translate3d[0, 100%, 0]; opacity: 1; } 100% { opacity: 1; } } @keyframes bottomSlide { 0% { -webkit-transform: translate3d[0, 100%, 0]; transform: translate3d[0, 100%, 0]; opacity: 1; } 100% { opacity: 1; } } |