A light weight flat skin for video js
A Pen by Franklin Gitonga on CodePen.
<video id="home_video1" class="video-js radium-player-skin" data-subtitles-enable="false" height="360" poster="http://www.videojs.com/img/poster.jpg" title="Home" width="640" controls | |
preload="auto" data-setup="{}"> | |
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> | |
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"> | |
<track default="true" src="http://www.videojs.com/vtt/captions.vtt" srclang="en" label="English"></track> | |
</video> | |
<p>By Franklin Gitonga <a href="http://twitter.com/radiumthemes">@radiumthemes</a> |
A light weight flat skin for video js
A Pen by Franklin Gitonga on CodePen.
@import "compass"; | |
$player-controls-height: 32px; | |
/*! | |
Video.js Radium Player Style (http://radiumthemes.com) | |
Version 1.0.0 | |
*/ | |
/*TODO: Use Svg images instead of data-uri*/ | |
/* Base UI Component Classes | |
-------------------------------------------------------------------------------- | |
*/ | |
/* Slider - used for Volume bar and Seek bar */ | |
.radium-player-skin { | |
color: #cccccc; | |
-moz-box-sizing: content-box; | |
-webkit-box-sizing: content-box; | |
box-sizing: content-box; | |
* { | |
font-size: 12px; | |
line-height: $player-controls-height; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.vjs-slider { | |
/* Replace browser focus hightlight with handle highlight */ | |
outline: 0; | |
position: relative; | |
cursor: pointer; | |
padding: 0; | |
margin: 13px 0 auto; | |
/* background-color-with-alpha */ | |
background-color: #333333; | |
background-color: rgba(51, 51, 51, 0.9); | |
} | |
.vjs-slider:focus { | |
/* box-shadow */ | |
-webkit-box-shadow: 0 0 2em #ffffff; | |
-moz-box-shadow: 0 0 2em #ffffff; | |
box-shadow: 0 0 2em #ffffff; | |
} | |
.vjs-slider-handle { | |
position: absolute; | |
/* Needed for IE6 */ | |
left: 0; | |
top: 0; | |
} | |
.vjs-slider-handle:before { | |
content: ""; | |
top: -4px; | |
left: 4px; | |
width: 10px; | |
height: 10px; | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFERDRCNzg0QTgyMDExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFERDRCNzg1QTgyMDExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QURENEI3ODJBODIwMTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QURENEI3ODNBODIwMTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6l5N2vAAAAvklEQVR42mJcOG8BAxRIA7E6EAtD+W+B+CYQPwVxWKCCekCszYAKxKH4KhBfYoGapM3AyMDCysYWxcjEaAPkM/7/9//w71+/ljH8BxvwlglqHQNUkQeQyQPE3CA2KxtrKNR0dZBCIRALahIKYGRicoQyhZgYiAOMIIXvQCygm46gy/7/928/LARYoEEgDnI40J0gJ9hCNQI983s1VOFNFmg4XQX57vfPX4uA7EVoBoOC5yksHC9BAxhngAMEGADnHDfY/59IIwAAAABJRU5ErkJggg==) no-repeat center center; | |
position: absolute; | |
} | |
/* Control Bar | |
-------------------------------------------------------------------------------- | |
The default control bar that is a container for most of the controls. | |
*/ | |
.vjs-control-bar { | |
/* Start hidden */ | |
display: none; | |
position: absolute; | |
/* Place control bar at the bottom of the player box/video. | |
If you want more margin below the control bar, add more height. */ | |
bottom: 0; | |
/* Use left/right to stretch to 100% width of player div */ | |
left: 0; | |
right: 0; | |
/* Height includes any margin you want above or below control items */ | |
height: $player-controls-height; | |
/* background-color-with-alpha */ | |
background-color: #07141e; | |
background-color: rgba(7, 20, 30, 0.7); | |
} | |
/* Show the control bar only once the video has started playing */ | |
&.vjs-has-started .vjs-control-bar { | |
display: block; | |
/* Visibility needed to make sure things hide in older browsers too. */ | |
visibility: visible; | |
opacity: 1; | |
/* transition */ | |
-webkit-transition: visibility 0.1s, opacity 0.1s; | |
-moz-transition: visibility 0.1s, opacity 0.1s; | |
-o-transition: visibility 0.1s, opacity 0.1s; | |
transition: visibility 0.1s, opacity 0.1s; | |
} | |
/* Hide the control bar when the video is playing and the user is inactive */ | |
&.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { | |
display: block; | |
visibility: hidden; | |
opacity: 0; | |
/* transition */ | |
-webkit-transition: visibility 1s, opacity 1s; | |
-moz-transition: visibility 1s, opacity 1s; | |
-o-transition: visibility 1s, opacity 1s; | |
transition: visibility 1s, opacity 1s; | |
} | |
&.vjs-controls-disabled .vjs-control-bar { | |
display: none; | |
} | |
&.vjs-using-native-controls .vjs-control-bar { | |
display: none; | |
} | |
/* General styles for individual controls. */ | |
.vjs-control { | |
outline: none; | |
position: relative; | |
float: left; | |
text-align: center; | |
margin: 0; | |
padding: 0; | |
height: $player-controls-height; | |
width: auto; | |
line-height: 18px; | |
} | |
/* FontAwsome button icons */ | |
.vjs-control:before { | |
font-family: VideoJS; | |
font-size: 1.5em; | |
line-height: 2; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
text-align: center; | |
} | |
/* Replacement for focus outline */ | |
.vjs-control:focus:before, | |
.vjs-control:hover:before { | |
text-shadow: 0em 0em 1em #ffffff; | |
} | |
.vjs-control:focus { | |
/* outline: 0; */ | |
/* keyboard-only users cannot see the focus on several of the UI elements when | |
this is set to 0 */ | |
} | |
/* Hide control text visually, but have it available for screenreaders */ | |
.vjs-control-text { | |
/* hide-visually */ | |
border: 0; | |
clip: rect(0 0 0 0); | |
height: 1px; | |
margin: -1px; | |
overflow: hidden; | |
padding: 0; | |
position: absolute; | |
width: 1px; | |
} | |
/* Play/Pause | |
-------------------------------------------------------------------------------- | |
*/ | |
.vjs-play-control { | |
width: 14px; | |
height: $player-controls-height; | |
cursor: pointer; | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAYAAAAmlE46AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgzQ0RDNERCQTgxRjExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgzQ0RDNERDQTgxRjExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODNDREM0RDlBODFGMTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODNDREM0REFBODFGMTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7t4+blAAAAnklEQVR42mL4////IiCWB2IGUjCIAIGfQDwBiEVI1QgDn4C4Foh5SNUIAy+AOBuI2UjVCAN3gDgSiJlI1QgD54DYnRyNMLAPiM1AGhn/g7WTBEDq20i18SkQpwIxC7Ea3wNxORBzEuvHb0DcBcSCxIbqbyCeA8QyxMbjPyBeB8RapKScA0BsQUpavQDEXqTmDlA8MgHj5R+JcckAEGAA1e6uZR45BPUAAAAASUVORK5CYII=) no-repeat center center; | |
padding: 0 15px; | |
} | |
&.vjs-playing .vjs-play-control { | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAPCAYAAAAyPTUwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUyMTc5NDUzQTgyODExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUyMTc5NDU0QTgyODExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QURENEI3ODZBODIwMTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTIxNzk0NTJBODI4MTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz593tG1AAAAIElEQVR42mL8DwQMqIARiY0ix8RAAhhVPKqYKooBAgwAJX0FGqy5iE4AAAAASUVORK5CYII=) no-repeat center center; | |
} | |
/* Volume/Mute | |
-------------------------------------------------------------------------------- */ | |
.vjs-mute-control, | |
.vjs-volume-menu-button { | |
cursor: pointer; | |
float: right; | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAMCAYAAABvEu28AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFERDRCNzdDQTgyMDExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFERDRCNzdEQTgyMDExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODNDREM0RTFBODFGMTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODNDREM0RTJBODFGMTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7eIJ0lAAABAElEQVR42pTTPWsCMRjA8SiCL4ttQRdBcbMglM498AsoDsVJnJ3cHVx09ys4dNPVwdXNTVoEQXBqHQSLCAU7OMR/uBwewfjywO94cuGehOQ5IaUUFm+Y4MEyH8MGjhrbipTxL91IX1isjS8Ez01WcZCnMAs9o6c+xhP2KAZ41IQQUeFGBk0ExSnUu288Yoc4VqhghAH+hLwe3o7WeNf5EF2dN7Dwr3wt5njV+QJZnavdpe8pZEbYP7inUB6fOs9hqfMUfszDTqJlrOYddgK/vsMuYow+9ueu39GNZrv+F3wgoJtVXX/J1mhZTG9oyA5mtob0RFBH6MIvskVBjY8CDAAs77OxcXhnywAAAABJRU5ErkJggg==) no-repeat center center; | |
margin-right: 10px; | |
height: $player-controls-height; | |
width: 18px; | |
} | |
.vjs-volume-control { | |
float: right; | |
margin-right: 15px; | |
} | |
.vjs-volume-bar { | |
width: 5em; | |
height: 4px; | |
margin: 13px auto 0; | |
} | |
.vjs-volume-menu-button .vjs-menu-content { | |
height: 2.9em; | |
} | |
.vjs-volume-level { | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 4px; | |
background: #a7a7a7; | |
} | |
.vjs-volume-bar .vjs-volume-handle { | |
width: 0.5em; | |
height: 0.5em; | |
} | |
.vjs-volume-handle:before { | |
content: ""; | |
top: -3px; | |
left: -3px; | |
width: 10px; | |
height: 10px; | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFERDRCNzg0QTgyMDExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFERDRCNzg1QTgyMDExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QURENEI3ODJBODIwMTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QURENEI3ODNBODIwMTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6l5N2vAAAAvklEQVR42mJcOG8BAxRIA7E6EAtD+W+B+CYQPwVxWKCCekCszYAKxKH4KhBfYoGapM3AyMDCysYWxcjEaAPkM/7/9//w71+/ljH8BxvwlglqHQNUkQeQyQPE3CA2KxtrKNR0dZBCIRALahIKYGRicoQyhZgYiAOMIIXvQCygm46gy/7/928/LARYoEEgDnI40J0gJ9hCNQI983s1VOFNFmg4XQX57vfPX4uA7EVoBoOC5yksHC9BAxhngAMEGADnHDfY/59IIwAAAABJRU5ErkJggg==) no-repeat center center; | |
} | |
.vjs-volume-menu-button .vjs-menu .vjs-menu-content { | |
width: 6em; | |
left: -4em; | |
} | |
/* Progress | |
-------------------------------------------------------------------------------- | |
*/ | |
.vjs-progress-control { | |
position: relative; | |
width: auto; | |
height: 4px; | |
width: 55%; | |
float: left; | |
/* Shrink the bar slower than it grows. */ | |
/* transition */ | |
-webkit-transition: all 0.4s; | |
-moz-transition: all 0.4s; | |
-o-transition: all 0.4s; | |
transition: all 0.4s; | |
} | |
/* On hover, make the progress bar grow to something that's more clickable. | |
This simply changes the overall font for the progress bar, and this | |
updates both the em-based widths and heights, as wells as the icon font */ | |
&:hover .vjs-progress-control { | |
font-size: .9em; | |
/* Even though we're not changing the top/height, we need to include them in | |
the transition so they're handled correctly. */ | |
/* transition */ | |
-webkit-transition: all 0.2s; | |
-moz-transition: all 0.2s; | |
-o-transition: all 0.2s; | |
transition: all 0.2s; | |
} | |
/* Box containing play and load progresses. Also acts as seek scrubber. */ | |
.vjs-progress-holder { | |
height: 100%; | |
&:hover { | |
.vjs-control-text { display: block; } | |
} | |
} | |
/* Progress Bars */ | |
.vjs-progress-holder .vjs-play-progress, | |
.vjs-progress-holder .vjs-load-progress { | |
position: absolute; | |
display: block; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
/* Needed for IE6 */ | |
left: 0; | |
top: 0; | |
} | |
.vjs-play-progress { | |
background: #a7a7a7; | |
} | |
.vjs-load-progress { | |
/* | |
Using a data URI to create the white diagonal lines with a transparent | |
background. Surprisingly works in IE8. | |
Created using http://www.patternify.com | |
Changing the first color value will change the bar color. | |
Also using a paralax effect to make the lines move backwards. | |
The -50% left position makes that happen. | |
*/ | |
background: #4f4f4f url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat; | |
background-position: 0px 0px; | |
-webkit-animation: videojsloading 2.5s linear infinite; | |
-moz-animation: videojsloading 2.5s linear infinite; | |
-ms-animation: videojsloading 2.5s linear infinite; | |
-o-animation: videojsloading 2.5s linear infinite; | |
animation: videojsloading 2.5s linear infinite; | |
} | |
.vjs-seek-handle { | |
width: 1.5em; | |
height: 100%; | |
.vjs-control-text { | |
overflow: visible; | |
position: absolute; | |
height: auto; | |
width: auto; | |
top: -30px; | |
clip: auto; | |
background: #000; | |
padding: 4px 8px; | |
left: -10px; | |
border-radius: 3px; | |
display: none; | |
line-height: 1; | |
&:before{ | |
border: solid; | |
border-color: #000 rgba(0, 0, 0, 0); | |
border-width: 4px 4px 0 4px; | |
bottom: -4px; | |
content: ""; | |
left: 39%; | |
position: absolute; | |
} | |
} | |
} | |
.vjs-seek-handle:before { | |
padding-top: 0.1em /* Minor adjustment */; | |
} | |
/* Time Display | |
-------------------------------------------------------------------------------- | |
*/ | |
.vjs-time-controls { | |
font-size: 12px; | |
line-height: $player-controls-height; | |
} | |
.vjs-current-time { | |
float: left; | |
width: auto; | |
padding-right: 15px; | |
} | |
.vjs-duration { | |
float: right; | |
width: auto; | |
padding-left: 15px; | |
display: none; | |
} | |
/* Remaining time is in the HTML, but not included in default design */ | |
.vjs-remaining-time { | |
display: none; | |
float: right; | |
} | |
.vjs-time-divider { | |
float: left; | |
line-height: $player-controls-height; | |
display: none; | |
} | |
/* Fullscreen | |
-------------------------------------------------------------------------------- | |
*/ | |
.vjs-fullscreen-control { | |
width: 3.8em; | |
cursor: pointer; | |
float: right; | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFERDRCNzgwQTgyMDExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFERDRCNzgxQTgyMDExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QURENEI3N0VBODIwMTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QURENEI3N0ZBODIwMTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5s1YJeAAAA00lEQVR42mL8//8/AwHADsR8QPwHi9xfBpABBDAjEM/5jx1cIsYAmCGzsRnASIQXYEAKiG8CMQ+S2GUmIjVLAvFeNM1gwESk5v1ArAHlXwTihTBJFiIM+A/FMM0uQPwWGitmhAIOxpYC4jVALIImnw9iaKBJgLAkEJ8FYjtCMQQivIH4ApIhIM03oNH0GYjNiDHgP9QQXSTN/9EMJmgACPwlRTMIM+GIVlhovyEURfjSASMxKQyXAfrQxCNOyABQXIJSmg2S2GekrPsIiG/hMwAgwACHgYon0TUkTwAAAABJRU5ErkJggg==) no-repeat center center; | |
margin:0 15px; | |
height: $player-controls-height; | |
width: 16px; | |
} | |
/* Switch to the exit icon when the player is in fullscreen */ | |
&.vjs-fullscreen .vjs-fullscreen-control { | |
background: url(../images/normal-icon.png) no-repeat center center; | |
} | |
/* Big Play Button (play button at start) | |
-------------------------------------------------------------------------------- | |
Positioning of the play button in the center or other corners can be done more | |
easily in the skin designer. http://designer.videojs.com/ | |
*/ | |
.vjs-big-play-button { | |
display: block; | |
z-index: 2; | |
text-align: center; | |
vertical-align: middle; | |
cursor: pointer; | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAYAAADhu0ooAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUyMTc5NDU3QTgyODExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUyMTc5NDU4QTgyODExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTIxNzk0NTVBODI4MTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTIxNzk0NTZBODI4MTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4tz8P+AAAFYklEQVR42txby29UVRj/OrmFoTUpINAGLdgWXbGpUIJuKCY+CqhEFxQ2mECRBbohYQUu5A9gARt0AxsoASRqFMVEwAXBR+2mbAql4hTCq1ADrX1MGL4v/Z3Ox8kM03bOPfdOf8kvPXfa3nt+9zy+x/mmLJPJUAgImHXMemY1s4Y5nzmHmcTfDDP/Zz5k3mPeYvYwe5lp1x0qcyi0grmC2ch8lTlrmvcZZV5ldjI7mENxEbqY+TaziVnueCDGmH8yf8GIRyL0RebHzNflPjl+f4fZzexDW6bnY0xZwhR+gbkQ0/tl5mto25BO/s08zez3JTTACK7PMYI3mZfQqQfTfIHz8fLegHh7hH9knpvqOp6q0EXM7cyl1tu+gg70OJ66DcwW5nJr1qSYXzHvhiFUNplP1K4puMFsZ16ncCG7d6v1gmUJHMGm5UxoM3MTM6Gm0BnmrxhRH5ARXcv8SC2ZJ8wTzAsuhMpa/EBd38W0SVE0qGXuwDIy+I75QzFC1zC3qGuZooeYgxQtKpm7MKUNjjEv5vuHRIE12aquu5gHYiCS0IcD6JNBK3brKQmVabFV/V7cssPwWuKCUfSpV2nZak3p5woVO9kGv9SsyYMxE6nFHlRmJon1G0xGqDgDS9BOY+MZpPhiEH1Mq83qnUJCFzDXqevTEe6uU0EKfTVogZa8QjeqqOPGZOxTjHABfSZo2JhP6CKEWcatOwaDXCp4Ai/N2MuVOkDQQt9T17Jt/0Olh+vK5Ign9a4tNIk3YHCWShe67yuNb55QzsFstPscRSHzEHL5Rg80EDQ1aqFN6g9/d/RACcy/ZH6oXqIvXFbtJiM0QI7H4A+HDyyHudrPXJUnExEG/lJt0RaI0DplUiQvMxDCg6uY25h7LEc8LDxE+saYmrqE9eBrHgLoPfBJq0J+Vrd+bmDlZf71FEC/CZv9E41n+MZCeE6falcnLFfptscNYzY2qi/MzugYWkuNCJ2rPnhA/iEe2U7mbuZLDu97X7XnitAKKxKICpLT3cvcTOP53mLxSLWTCXo2qzccsVcj/WmGOXqrQAakEEb0MklQfFFs3wL7YliNajLiUZUI5Dfm9zR+fFHsZjcxuiJ0SAmtjFCo2L0TllkoBnP0kgzgCRnnW372exZ4D9mBTsf3nafaAwG2YeMdyYHtVU8CR0J2GGq0TQ0wVVbhgyUeBGYQXciRxn8hPkef09wJ6NkDomUeMgAnKfxDKWOXJ54rQiUBPAovfzE8JdcRjIzcKRo/vfZxKCXr0+SLRFuv2Kq0tS6bHD7QHNzuQ5zr6+RNp4VEW9oYZb3jrXb0sH447N9aXooPaA2d2vvoUDufhG0NjoLfKIKEBhV6jkHbhNAhK/3QQqUL3feJ8h3tT55Ta0hqBl4pQZH16LsxYz/ncpxvmWFGFmCLA8fadxDQStkEXAep2iRbyBnKHg8uRchUKmhWTsIotOQNhe7DHBhIYURtCYisRV8NzloZhpxTU3xPkySTvOwOKwsRN0jf2ihbqZLCflMwuBUH4msVrklO53OafhFjmJiFvlWrDIk+FC4YxctR+VHKHhtKkvtTcl/UWAzK0ac6FbQfpTzVZM/bVaWer11dy7b9WUymcQX6slx91o4+58RkCqo2MN+3RnvGFVQZSGnaJmWj4lIil0H65XzBf3ZQ9HicsrU+YUHW4WbyUPRIagduszIRcoMu2K4ZUcZqIMG61PGso3AKkyVolgOoSAuTNSZbap5CW+LTQRWbSt61EvepxiZTqNT8G9vj8SHUYMZ/ecBGJWW/DrKMivs6SA9GsIMcHXyVefyCTxUMvTkqGEFQ/AjT0VTDhPIFn6cCDAAMlGxEtrt6eAAAAABJRU5ErkJggg==) 0 0 no-repeat; | |
width: 58px; | |
height: 58px; | |
margin-left: -$player-controls-height; | |
margin-top: -35px; | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
text-indent: 100%; | |
overflow: hidden; | |
white-space: nowrap; | |
opacity: 0.7; | |
filter: alpha(opacity=70); | |
-webkit-transition: opacity .5s ease-in-out; | |
-moz-transition: opacity .5s ease-in-out; | |
-ms-transition: opacity .5s ease-in-out; | |
-o-transition: opacity .5s ease-in-out; | |
transition: opacity .5s ease-in-out; | |
} | |
/* Optionally center */ | |
&.vjs-big-play-centered .vjs-big-play-button { | |
/* Center it horizontally */ | |
left: 50%; | |
margin-left: -2.1em; | |
/* Center it vertically */ | |
top: 50%; | |
margin-top: -1.4000000000000001em; | |
} | |
/* Hide if controls are disabled */ | |
&.vjs-controls-disabled .vjs-big-play-button { | |
display: none; | |
} | |
/* Hide when video starts playing */ | |
&.vjs-has-started.vjs-playing .vjs-big-play-button { | |
display: none; | |
} | |
/* Display if paused */ | |
&.vjs-has-started.vjs-paused .vjs-big-play-button{ | |
display: block; | |
} | |
/* Hide on mobile devices. Remove when we stop using native controls | |
by default on mobile */ | |
&.vjs-using-native-controls .vjs-big-play-button { | |
display: none; | |
} | |
&:hover .vjs-big-play-button, | |
.vjs-big-play-button:focus { | |
outline: 0; | |
opacity: 1; | |
/* transition */ | |
-webkit-transition: all 0s; | |
-moz-transition: all 0s; | |
-o-transition: all 0s; | |
transition: all 0s; | |
} | |
/* Menu Buttons (Captions/Subtitles/etc.) | |
-------------------------------------------------------------------------------- | |
*/ | |
.vjs-menu-button { | |
float: right; | |
cursor: pointer; | |
margin-right: 15px; | |
} | |
.vjs-menu { | |
display: none; | |
position: absolute; | |
bottom: 0; | |
left: 0em; | |
/* (Width of vjs-menu - width of button) / 2 */ | |
width: 0; | |
height: 0; | |
margin-bottom: $player-controls-height; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
border-top: 10px solid #000000; | |
/* Same width top as ul bottom */ | |
border-top-color: #000000; | |
/* Same as ul background */ | |
} | |
/* Button Pop-up Menu */ | |
.vjs-menu-button .vjs-menu .vjs-menu-content { | |
display: block; | |
padding: 0; | |
margin: 0; | |
position: absolute; | |
width: 10em; | |
bottom: 10px; | |
/* Same bottom as vjs-menu border-top */ | |
max-height: 15em; | |
overflow: auto; | |
left: -5em; | |
/* Width of menu - width of button / 2 */ | |
/* background-color-with-alpha */ | |
background-color: #07141e; | |
background-color: rgba(7, 20, 30, 0.7); | |
} | |
.vjs-menu-button:hover .vjs-menu { | |
display: block; | |
} | |
.vjs-menu-button ul li { | |
list-style: none; | |
margin: 0; | |
padding: 0.3em 0 0.3em 0; | |
line-height: 1.4em; | |
font-size: 1.2em; | |
text-align: center; | |
text-transform: lowercase; | |
} | |
.vjs-menu-button ul li.vjs-selected { | |
background-color: #000; | |
} | |
.vjs-menu-button ul li:focus, | |
.vjs-menu-button ul li:hover, | |
.vjs-menu-button ul li.vjs-selected:focus, | |
.vjs-menu-button ul li.vjs-selected:hover { | |
outline: 0; | |
color: #111; | |
/* background-color-with-alpha */ | |
background-color: #ffffff; | |
background-color: rgba(255, 255, 255, 0.75); | |
} | |
.vjs-menu-button ul li.vjs-menu-title { | |
text-align: center; | |
text-transform: uppercase; | |
font-size: 1em; | |
line-height: 2em; | |
padding: 0; | |
margin: 0 0 0.3em 0; | |
font-weight: bold; | |
cursor: default; | |
} | |
/* Subtitles Button */ | |
.vjs-subtitles-button { | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAMCAIAAAACrGGSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgzQ0RDNERGQTgxRjExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgzQ0RDNEUwQTgxRjExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODNDREM0RERBODFGMTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODNDREM0REVBODFGMTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4c/FA5AAAAxUlEQVR42sSRsQmFMBRFNVhau8LfI1iaOi6STmdwADOBEziAVmmyQAawEjKAevWBBJHPR4t/IXDz8s4jN4nXdY1eKMFijD2Dl2Vh0Tvd8FLKYRistW3bUqWqKnsI5tqN/HEgzvk0TWVZwo/jqLWu69o59zl0HpH2t7vwALquIw8A3ZiCEed0KORv7u+9D7dpms7z/Gt+hBRCkFdK5XlujCmKgipN02RZ9i0/RXCH+r6n2DBUwVHYubN7hj/+f0JjHvObAAMA3jxwaNAhKsMAAAAASUVORK5CYII=) no-repeat center center; | |
margin-right: 15px; | |
height: $player-controls-height; | |
width: 21px; | |
} | |
/* Hide disabled or unsupported controls */ | |
.vjs-hidden { | |
display: none; | |
} | |
.vjs-resolutions-button { | |
cursor: pointer; | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAKCAYAAACwoK7bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUyMTc5NDVCQTgyODExRTM4QTJDOTFFNUFDNTBBNjhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUyMTc5NDVDQTgyODExRTM4QTJDOTFFNUFDNTBBNjhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTIxNzk0NTlBODI4MTFFMzhBMkM5MUU1QUM1MEE2OEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTIxNzk0NUFBODI4MTFFMzhBMkM5MUU1QUM1MEE2OEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz57ylL6AAABRUlEQVR42ozSTytEURjH8cvcQvlvosYUk4XIvw32eAPkNdixsbCXlbIWb8BK7kZZWdqMkpqFLJQxKcxoZKFJXN/D79TjRjz16dxzntPcM79zgziOAyyiIqta8za1focsZvH4A7enhH3kwuCrptGp5+vge02qV8YtltAR/F4LyPgfHtFYw0liY05jCe/YxQHq0Yo69QewhRYMh9rQq+YblvWCQCfL6vlG4xzSeMaOOcAxVnTImsuwTfn9VevKvKr5BVLmLtIoq1dwJ+5Hl95aVY6+ekwvj240an6uf+irz2RfdDEMIqWFbUzIOCITUQFDaNDaZeIuphTr50vdicdM8xSvZu7zrehrmTe9ZszoOYM104tcNkcmx1GTWROKPjOt7f3jLiK3N9Tn8aBsrxL5uk/pHmdaa9fcl+vHeMETDrHhGh8CDAB1/B1ptIRuqgAAAABJRU5ErkJggg==) no-repeat center center; | |
margin-right: 15px; | |
height: $player-controls-height; | |
width: 22px; | |
} | |
/* Resolutions Icon */ | |
.vjs-resolutions-button .vjs-control-content { | |
content: ""; | |
width: 17px; | |
height: 17px; | |
} | |
} | |
/* IE8 is flakey with fonts, and you have to change the actual content to force | |
fonts to show/hide properly. | |
- "\9" IE8 hack didn't work for this | |
- Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9 | |
*/ | |
@media \0screen { | |
.radium-player-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before { | |
content: ""; | |
} | |
} | |
/* Loading Spinner | |
-------------------------------------------------------------------------------- | |
*/ | |
.vjs-loading-spinner { | |
display: none; | |
position: absolute; | |
opacity: 0.75; | |
position:absolute; | |
top: 49%; | |
left: 45%; | |
width: 58px; | |
height: 58px; | |
margin: -30px 0 0; | |
border-width: 4px; | |
border-style: solid; | |
border-color: #FFF #FFF rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5); | |
opacity: .9; | |
border-radius: 50%; | |
/* animation */ | |
-webkit-animation: spin 1.5s infinite linear; | |
-moz-animation: spin 1.5s infinite linear; | |
-o-animation: spin 1.5s infinite linear; | |
animation: spin 1.5s infinite linear; | |
} | |
@-moz-keyframes spin { | |
0% { | |
-moz-transform: rotate(0deg); | |
} | |
100% { | |
-moz-transform: rotate(359deg); | |
} | |
} | |
@-webkit-keyframes spin { | |
0% { | |
-webkit-transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(359deg); | |
} | |
} | |
@-o-keyframes spin { | |
0% { | |
-o-transform: rotate(0deg); | |
} | |
100% { | |
-o-transform: rotate(359deg); | |
} | |
} | |
@keyframes spin { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(359deg); | |
} | |
} | |
@keyframes videojsloading { | |
0% { background-position: 0 0; } | |
100% { background-position: 80px 0; } | |
} | |
@-webkit-keyframes videojsloading { | |
0% { background-position: 0 0; } | |
100% { background-position: 80px 0; } | |
} | |
@-moz-keyframes videojsloading { | |
0% { background-position: 0 0; } | |
100% { background-position: 80px 0; } | |
} | |
/* | |
REQUIRED STYLES (be careful overriding) | |
================================================================================ | |
When loading the player, the video tag is replaced with a DIV, | |
that will hold the video tag or object tag for other playback methods. | |
The div contains the video playback element (Flash or HTML5) and controls, | |
and sets the width and height of the video. | |
** If you want to add some kind of border/padding (e.g. a frame), or special | |
positioning, use another containing element. Otherwise you risk messing up | |
control positioning and full window mode. ** | |
*/ | |
.video-js { | |
background-color: #000; | |
position: relative; | |
padding: 0; | |
/* Start with 10px for base font size so other dimensions can be em based and | |
easily calculable. */ | |
font-size: 10px; | |
/* Allow poster to be vertially aligned. */ | |
vertical-align: middle; | |
/* display: table-cell; */ | |
/*This works in Safari but not Firefox.*/ | |
/* Provide some basic defaults for fonts */ | |
font-weight: normal; | |
font-style: normal; | |
/* Avoiding helvetica: issue #376 */ | |
font-family: Arial, sans-serif; | |
/* Turn off user selection (text highlighting) by default. | |
The majority of player components will not be text blocks. | |
Text areas will need to turn user selection back on. */ | |
/* user-select */ | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
/* Playback technology elements expand to the width/height of the containing div | |
<video> or <object> */ | |
.video-js .vjs-tech { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when | |
checking fullScreenEnabled. */ | |
.video-js:-moz-full-screen { | |
position: absolute; | |
} | |
/* Fullscreen Styles */ | |
body.vjs-full-window { | |
padding: 0; | |
margin: 0; | |
height: 100%; | |
/* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */ | |
overflow-y: auto; | |
} | |
.video-js.vjs-fullscreen { | |
position: fixed; | |
overflow: hidden; | |
z-index: 1000; | |
left: 0; | |
top: 0; | |
bottom: 0; | |
right: 0; | |
width: 100% !important; | |
height: 100% !important; | |
/* IE6 full-window (underscore hack) */ | |
_position: absolute; | |
} | |
.video-js:-webkit-full-screen { | |
width: 100% !important; | |
height: 100% !important; | |
} | |
.video-js.vjs-fullscreen.vjs-user-inactive { | |
cursor: none; | |
} | |
/* Poster Styles */ | |
.vjs-poster { | |
background-repeat: no-repeat; | |
background-position: 50% 50%; | |
background-size: contain; | |
cursor: pointer; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
position: relative; | |
width: 100%; | |
} | |
.vjs-poster img { | |
display: block; | |
margin: 0 auto; | |
max-height: 100%; | |
padding: 0; | |
width: 100%; | |
} | |
/* Hide the poster when native controls are used otherwise it covers them */ | |
.video-js.vjs-using-native-controls .vjs-poster { | |
display: none; | |
} | |
/* Text Track Styles */ | |
/* Overall track holder for both captions and subtitles */ | |
.video-js .vjs-text-track-display { | |
text-align: center; | |
position: absolute; | |
bottom: 45px; | |
left: 0; | |
right: 0; | |
/* transition */ | |
-webkit-transition: all 0.4s; | |
-moz-transition: all 0.4s; | |
-o-transition: all 0.4s; | |
transition: all 0.4s; | |
} | |
.video-js.vjs-user-inactive .vjs-text-track-display { | |
bottom: 5px; | |
} | |
/* Individual tracks */ | |
.video-js .vjs-text-track { | |
display: none; | |
text-align: center; | |
} | |
.video-js .vjs-subtitles { | |
color: #ffffff /* Subtitles are white */; | |
} | |
.video-js .vjs-captions { | |
color: #ffcc66 /* Captions are yellow */; | |
} | |
.vjs-tt-cue { | |
display: block; | |
width: auto; | |
display: inline-block; | |
padding: 3px 5px; | |
/* Transparent black background, or fallback to all black (oldIE) */ | |
/* background-color-with-alpha */ | |
background-color: #000000; | |
background-color: rgba(0, 0, 0, 0.5); | |
} | |
.vjs-lock-showing { | |
display: block !important; | |
opacity: 1; | |
visibility: visible; | |
} |