/* utilities */ .sr-only { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .hide { display: none; } .show-inline { display: inline-block; } /* video */ .px-video-container { min-width: 300px; /* so video controls don't fall in on themselves in narrow browsers */ } .px-video-img-captions-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .px-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* containers */ .px-video-img-captions-container * { box-sizing: border-box; } .px-video-img-captions-container { position: relative; } .px-video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; z-index: 1; } .px-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .progress-bar { width: 85%; } @media only screen and (min-width: 480px) { .progress-bar { width: 90%; } } @media only screen and (min-width: 480px) { .progress-bar { width: 92.5%; } } @media only screen and (min-width: 970px) { .progress-bar { width: 95%; } } @media only screen and (min-width: 970px) { .progress-bar { width: 96%; } } @media only screen and (min-width: 1795px) { .progress-bar { width: 97.5%; } } .px-video-controls { margin-bottom: 10px; /* a little space below the player */ margin-top: 10px; /* put some spacing between video and controls to stop mis-tapping/clicking */ } .px-video-controls:after { /* clear floats so controls don't get hidden by objects below */ display: block; font-size: 0; content: " "; clear: both; height: 0; visibility: hidden; } /* progress indicator */ .px-video-progress { display: block; width: 100%; margin-bottom: 10px; height: 10px; } .px-video-progress[value] { /* Reset the default appearance */ -webkit-appearance: none; border: none; } .px-video-progress[value]::-webkit-progress-bar { background-color: #E6E6E6; } .px-video-progress[value]::-webkit-progress-value { background-color: #009CDF; } /* time */ .px-video-time { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; float: right; line-height: 30px; margin-top: -30px; /* bring time up alongside progress timeline */ font-size: 14px; } /* caption area */ .px-video-captions { box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; padding: .5em; min-height: 2.5em; background-color: #000; color: #fff; font-size: 1.1em; text-align: center; opacity: 0.75; z-index: 2; } /* buttons */ .px-video-playback-buttons { float: left; line-height: 20px; min-width: 140px; /* accommodate width of buttons */ width: 50%; /* half width of player */ } @media only screen and (min-width: 620px) { .px-video-playback-buttons { /* centre the playback buttons when the viewport is wider */ float: none; left: 50%; margin-left: -120px; /* half width of button container + width of repeat button, so play button is central */ min-width: 200px; position: absolute; width: 200px; /* accommodate width of new, wider buttons */ } } .px-video-controls button { border: 1px #fff solid; background: transparent; padding: 0; margin: 0 5px; width: 25px; height: 25px; overflow: hidden; background: no-repeat url('../images/px-video-sprite.svg'); } @media only screen and (min-width: 620px) { .px-video-controls button { background-size: 150%; width: 40px; height: 40px; } } /* use with Modernizr to provide a no-svg class on to support browsers that don't support SVG */ .no-svg .px-video-controls button { background: no-repeat url('../images/px-video-sprite.png'); } .px-video-controls button:focus { border: 1px #999 dotted; outline: none; } .px-video-controls button { cursor: pointer; } /* restart button */ .px-video-controls button.px-video-restart { background-position: -9px -331px; } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-restart { background-position: -9px -523px; } } .px-video-controls button.px-video-restart:hover, .px-video-controls button.px-video-restart:focus { background-position: -9px -295px; } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-restart:hover, .px-video-controls button.px-video-restart:focus { background-position: -9px -466px; } } /* rewind button */ .px-video-controls button.px-video-rewind { background-position: -9px -187px; } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-rewind { background-position: -9px -295px; } } .px-video-controls button.px-video-rewind:hover, .px-video-controls button.px-video-rewind:focus { background-position: -9px -151px; } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-rewind:hover, .px-video-controls button.px-video-rewind:focus { background-position: -9px -238px; } } /* play button */ .px-video-controls button.px-video-play { background-position: -8px -43px; } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-play { background-position: -8px -67px; } } .px-video-controls button.px-video-play:hover, .px-video-controls button.px-video-play:focus { background-position: -8px -7px; } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-play:hover, .px-video-controls button.px-video-play:focus { background-position: -8px -10px; } } /* pause button */ .px-video-controls button.px-video-pause { background-position: -9px -115px; } .px-video-controls button.px-video-pause:hover, .px-video-controls button.px-video-pause:focus { background-position: -9px -79px; } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-pause { background-position: -9px -182px; } } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-pause:hover, .px-video-controls button.px-video-pause:focus { background-position: -9px -124px; } } /* forward button */ .px-video-controls button.px-video-forward { background-position: -10px -259px; } .px-video-controls button.px-video-forward:hover, .px-video-controls button.px-video-forward:focus { background-position: -10px -223px; } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-forward { background-position: -10px -409px; } } @media only screen and (min-width: 620px) { .px-video-controls button.px-video-forward:hover, .px-video-controls button.px-video-forward:focus { background-position: -10px -352px; } } /* captions button */ .px-video-captions-btn-container { float: left; } @media only screen and (min-width: 540px) { .px-video-captions-btn-container { clear: none; margin-top: 1px; /* line up with buttons */ margin-left: 10px; /* space between volume slider and captions button */ } } .px-video-captions-btn-container label { display: inline-block; width: 25px; height: 20px; margin-top: 3px; /* line up with big buttons */ background: no-repeat url('../images/px-video-sprite.svg'); background-position: -6px -835px; } @media only screen and (min-width: 540px) { .px-video-captions-btn-container label { margin-top: 5px; /* line up with big buttons */ } } /* use with Modernizr to provide a no-svg class on to support browsers that don't support SVG */ .no-svg .px-video-captions-btn-container label { background: no-repeat url('../images/px-video-sprite.png'); } .px-video-captions-btn-container input[type="checkbox"]:focus+label { outline: 1px #999 dotted; background-position: -6px -799px; } .px-video-captions-btn-container input[type="checkbox"]:hover+label { background-position: -6px -799px; cursor: pointer; } .px-video-captions-btn-container input[type="checkbox"]:focus+label { outline: 1px #999 dotted; background-position: -6px -799px; } .px-video-captions-btn-container input[type="checkbox"]:checked+label { background-position: -6px -871px; } /* mute button */ .px-video-volume-controls { float: right; overflow: hidden; min-width: 133px; /* width of mute button and width of volume slider */ } @media only screen and (min-width: 540px) { .px-video-volume-controls { margin-top: 1px; } } .px-video-mute-btn-container { float: left; width: 26px; /* width of mute button */ } .px-video-mute-btn-container label { display: inline-block; width: 25px; height: 20px; margin-top: 3px; /* line up with big buttons */ background: no-repeat url('../images/px-video-sprite.svg'); background-position: -6px -476px; } @media only screen and (min-width: 540px) { .px-video-mute-btn-container label { margin-top: 6px; /* line up with big buttons */ } } /* use with Modernizr to provide a no-svg class on to support browsers that don't support SVG */ .no-svg .px-video-mute-btn-container label { background: no-repeat url('../images/px-video-sprite.png'); } .px-video-mute-btn-container input[type="checkbox"]:focus+label { outline: 1px #999 dotted; background-position: -6px -440px; } .px-video-mute-btn-container input[type="checkbox"]:hover+label { background-position: -6px -440px; cursor: pointer; } .px-video-mute-btn-container input[type="checkbox"]:focus+label { outline: 1px #999 dotted; background-position: -6px -440px; } /* checked state of mute button */ .px-video-mute-btn-container input[type="checkbox"]:checked+label { background-position: -6px -692px; } .px-video-mute-btn-container input[type="checkbox"]:checked:hover+label, .px-video-mute-btn-container input[type="checkbox"]:checked:focus+label { background-position: -6px -656px; } /* volume range input */ .px-video-volume-slider { float: left; width: 95px; /* width of volume slider */ } .px-video-controls .controls { position: relative; } .px-video-controls input[type='range'] { -webkit-appearance: none; height: 6px; width: 85px; margin-top: 9px; margin-right: 0; margin-left: 5px; background-color: #E6E6E6; outline:none; } @media only screen and (min-width: 540px) { .px-video-controls input[type='range'] { margin-top: 12px; } } .px-video-controls input[type='range']:focus::-webkit-slider-thumb { outline: 1px #999 dotted; } .px-video-controls input[type='range']::-moz-range-track { -moz-appearance: none; height: 6px; background-color: #E6E6E6; border: none; } .px-video-controls input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; height: 10px; width: 6px; background-color: #666; } .px-video-controls input[type='range']::-moz-range-thumb { height: 12px; width: 8px; } /* fixing display for IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .px-video-controls input[type='range'] { position: relative; padding: 0; height: 8px; top: -3px; } .px-video-time { margin-top: 4px; } .px-video-captions { padding: 8px; min-height: 36px; } }