├── .editorconfig ├── .gitignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── dist ├── videojs-iplayer-theme.css ├── videojs-iplayer-theme.css.map ├── videojs-iplayer-theme.min.css └── videojs-iplayer-theme.min.css.map ├── example ├── css │ ├── videojs-iplayer-theme.css │ └── videojs-iplayer-theme.css.map ├── favicon.ico └── index.html ├── package.json └── src └── scss └── videojs-iplayer-theme.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 2 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .tmp 4 | .sass-cache -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * Livereload and connect variables 5 | */ 6 | var LIVERELOAD_PORT = 35729; 7 | var lrSnippet = require('connect-livereload')({ 8 | port: LIVERELOAD_PORT 9 | }); 10 | var mountFolder = function (connect, dir) { 11 | return connect.static(require('path').resolve(dir)); 12 | }; 13 | 14 | /** 15 | * Grunt module 16 | */ 17 | module.exports = function (grunt) { 18 | 19 | /** 20 | * Dynamically load npm tasks 21 | */ 22 | require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 23 | 24 | /** 25 | * Grunt config 26 | */ 27 | grunt.initConfig({ 28 | 29 | pkg: grunt.file.readJSON('package.json'), 30 | 31 | /** 32 | * Set project info 33 | */ 34 | project: { 35 | src: 'src', 36 | dist: 'dist', 37 | example: 'example', 38 | css: [ 39 | '<%= project.src %>/scss/videojs-iplayer-theme.scss' 40 | ] 41 | }, 42 | 43 | /** 44 | * Project banner 45 | * Dynamically appended to CSS/JS files 46 | * Inherits text from package.json 47 | */ 48 | tag: { 49 | banner: '/*!\n' + 50 | ' * <%= pkg.name %>\n' + 51 | ' * <%= pkg.title %>\n' + 52 | ' * <%= pkg.url %>\n' + 53 | ' * @author <%= pkg.author %>\n' + 54 | ' * @version <%= pkg.version %>\n' + 55 | ' * Copyright <%= pkg.copyright %>. <%= pkg.license %> licensed.\n' + 56 | ' */\n' 57 | }, 58 | 59 | /** 60 | * Connect port/livereload 61 | * https://github.com/gruntjs/grunt-contrib-connect 62 | * Starts a local webserver and injects 63 | * livereload snippet 64 | */ 65 | connect: { 66 | options: { 67 | port: 9000, 68 | hostname: '*' 69 | }, 70 | livereload: { 71 | options: { 72 | middleware: function (connect) { 73 | return [lrSnippet, mountFolder(connect, 'example')]; 74 | } 75 | } 76 | } 77 | }, 78 | 79 | /** 80 | * Clear files and folders. 81 | * https://github.com/gruntjs/grunt-contrib-clean 82 | * Removes all files in the dist folder 83 | */ 84 | clean: { 85 | build: ['<%= project.dist %>'] 86 | }, 87 | 88 | /** 89 | * Compile Sass/SCSS files 90 | * https://github.com/gruntjs/grunt-contrib-sass 91 | * Compiles all Sass/SCSS files and appends project banner 92 | */ 93 | sass: { 94 | dev: { 95 | options: { 96 | style: 'expanded', 97 | banner: '<%= tag.banner %>' 98 | }, 99 | files: { 100 | '<%= project.example %>/css/videojs-iplayer-theme.css': '<%= project.css %>' 101 | } 102 | }, 103 | unmin: { 104 | options: { 105 | style: 'expanded', 106 | banner: '<%= tag.banner %>' 107 | }, 108 | files: { 109 | '<%= project.dist %>/videojs-iplayer-theme.css': '<%= project.css %>' 110 | } 111 | }, 112 | min: { 113 | options: { 114 | style: 'compressed', 115 | banner: '<%= tag.banner %>' 116 | }, 117 | files: { 118 | '<%= project.dist %>/videojs-iplayer-theme.min.css': '<%= project.css %>' 119 | } 120 | } 121 | }, 122 | 123 | /** 124 | * Opens the web server in the browser 125 | * https://github.com/jsoverson/grunt-open 126 | */ 127 | open: { 128 | server: { 129 | path: 'http://localhost:<%= connect.options.port %>' 130 | } 131 | }, 132 | 133 | /** 134 | * Runs tasks against changed watched files 135 | * https://github.com/gruntjs/grunt-contrib-watch 136 | * Watching development files and run concat/compile tasks 137 | * Livereload the browser once complete 138 | */ 139 | watch: { 140 | sass: { 141 | files: '<%= project.src %>/scss/{,*/}*.{scss,sass}', 142 | tasks: ['sass:dev'] 143 | }, 144 | livereload: { 145 | options: { 146 | livereload: LIVERELOAD_PORT 147 | }, 148 | files: [ 149 | '<%= project.example %>/index.html', 150 | '<%= project.dist %>/css/*.css' 151 | ] 152 | } 153 | } 154 | }); 155 | 156 | /** 157 | * Default task 158 | * Run `grunt` on the command line 159 | */ 160 | grunt.registerTask('default', [ 161 | 'sass:dev', 162 | 'connect:livereload', 163 | 'open', 164 | 'watch' 165 | ]); 166 | 167 | /** 168 | * Build task 169 | * Run `grunt build` on the command line 170 | * Then compress all JS/CSS files 171 | */ 172 | grunt.registerTask('build', [ 173 | 'clean', 174 | 'sass:unmin', 175 | 'sass:min' 176 | ]); 177 | 178 | }; 179 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-present Vijay Dubb 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Video.JS iPlayer Skin (2017) 2 | 3 | [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/VD39/videojs-iplayer-skin-1/blob/master/LICENSE) 4 | 5 | A Video.JS skin modelled on the new iPlayer theme. 6 | 7 | [Video.js](http://www.videojs.com/) 8 | 9 | [iPlayer](http://www.bbc.co.uk/iplayer) 10 | 11 | ## [Working Demo](https://vd39.github.io/videojs-iplayer-skin-1/example/) 12 | 13 | Supports HTML5 video, HTML5 audio, and YouTube videos (using [videojs-youtube](https://github.com/videojs/videojs-youtube)). 14 | 15 | ## Install 16 | 17 | ```sh 18 | npm install videojs-iplayer-skin-1 --save 19 | ``` 20 | 21 | ### Works only with version 6 of Video.js 22 | 23 | ## License 24 | [MIT](https://github.com/VD39/videojs-iplayer-skin-1/blob/master/LICENSE) 25 | -------------------------------------------------------------------------------- /dist/videojs-iplayer-theme.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * videojs-iplayer-skin-1 3 | * A Video.JS skin modelled on the new iPlayer theme. 4 | * 5 | * @author Vijay Dubb 6 | * @version 1.0.0 7 | * Copyright 2017. MIT licensed. 8 | */ 9 | 10 | .video-js .vjs-loading-spinner, 11 | .vjs-default-skin .vjs-loading-spinner { 12 | border-color: #bb1919; 13 | } 14 | .video-js .vjs-loading-spinner:before, .video-js .vjs-loading-spinner:after, 15 | .vjs-default-skin .vjs-loading-spinner:before, 16 | .vjs-default-skin .vjs-loading-spinner:after { 17 | border-color: #bb1919; 18 | } 19 | .video-js.vjs-paused .vjs-tech, 20 | .video-js.vjs-paused .vjs-big-play-button, 21 | .vjs-default-skin.vjs-paused .vjs-tech, 22 | .vjs-default-skin.vjs-paused .vjs-big-play-button { 23 | z-index: 2; 24 | } 25 | .video-js.vjs-paused .vjs-control-bar, 26 | .vjs-default-skin.vjs-paused .vjs-control-bar { 27 | z-index: -1; 28 | } 29 | .video-js.vjs-has-started .vjs-tech, 30 | .video-js.vjs-has-started .vjs-big-play-button, 31 | .vjs-default-skin.vjs-has-started .vjs-tech, 32 | .vjs-default-skin.vjs-has-started .vjs-big-play-button { 33 | z-index: 0; 34 | } 35 | .video-js.vjs-has-started .vjs-control-bar, 36 | .vjs-default-skin.vjs-has-started .vjs-control-bar { 37 | z-index: 2; 38 | } 39 | .video-js .vjs-menu, 40 | .vjs-default-skin .vjs-menu { 41 | bottom: 14px; 42 | } 43 | .video-js .vjs-big-play-button, 44 | .vjs-default-skin .vjs-big-play-button { 45 | background-color: rgba(0, 0, 0, 0.5); 46 | position: absolute; 47 | margin: 0; 48 | border-radius: 0; 49 | border: none; 50 | width: 85px; 51 | height: 85px; 52 | bottom: 0; 53 | left: 0; 54 | top: auto; 55 | box-shadow: none; 56 | transition: background-color .5s ease; 57 | } 58 | .video-js .vjs-big-play-button .vjs-icon-placeholder:hover, .video-js .vjs-big-play-button .vjs-icon-placeholder:focus, 59 | .vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:hover, 60 | .vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:focus { 61 | background-color: #bb1919; 62 | } 63 | .video-js .vjs-big-play-button .vjs-icon-placeholder:before, 64 | .vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:before { 65 | font-size: 60px; 66 | height: auto; 67 | padding: 0; 68 | margin: 0; 69 | line-height: 85px; 70 | } 71 | .video-js:hover .vjs-big-play-button, 72 | .video-js:hover .vjs-big-play-button:focus, .video-js:focus .vjs-big-play-button, 73 | .video-js:focus .vjs-big-play-button:focus, 74 | .vjs-default-skin:hover .vjs-big-play-button, 75 | .vjs-default-skin:hover .vjs-big-play-button:focus, 76 | .vjs-default-skin:focus .vjs-big-play-button, 77 | .vjs-default-skin:focus .vjs-big-play-button:focus { 78 | border-color: transparent; 79 | box-shadow: none; 80 | background-color: #bb1919; 81 | } 82 | .video-js .vjs-load-progress, 83 | .vjs-default-skin .vjs-load-progress { 84 | background: #e0e0e0; 85 | } 86 | .video-js .vjs-progress-holder .vjs-play-progress, 87 | .video-js .vjs-progress-holder .vjs-load-progress, 88 | .video-js .vjs-progress-holder .vjs-load-progress div, 89 | .vjs-default-skin .vjs-progress-holder .vjs-play-progress, 90 | .vjs-default-skin .vjs-progress-holder .vjs-load-progress, 91 | .vjs-default-skin .vjs-progress-holder .vjs-load-progress div { 92 | height: 6px; 93 | line-height: 44px; 94 | } 95 | .video-js .vjs-volume-level, 96 | .video-js .vjs-play-progress, 97 | .vjs-default-skin .vjs-volume-level, 98 | .vjs-default-skin .vjs-play-progress { 99 | background-color: #bb1919; 100 | } 101 | .video-js .vjs-volume-level:before, 102 | .video-js .vjs-play-progress:before, 103 | .vjs-default-skin .vjs-volume-level:before, 104 | .vjs-default-skin .vjs-play-progress:before { 105 | right: -8px; 106 | font-size: 0.9em; 107 | height: 14px; 108 | width: 9px; 109 | background: #FFFFFF; 110 | padding: 0; 111 | margin: 0; 112 | position: absolute; 113 | top: 50%; 114 | -webkit-transform: translate(-50%, -50%); 115 | -ms-transform: translate(-50%, -50%); 116 | transform: translate(-50%, -50%); 117 | content: ''; 118 | } 119 | .video-js .vjs-control-bar, 120 | .vjs-default-skin .vjs-control-bar { 121 | display: -webkit-flex; 122 | display: flex; 123 | -webkit-flex-direction: row; 124 | flex-direction: row; 125 | -webkit-justify-content: flex-end; 126 | justify-content: flex-end; 127 | height: 120px; 128 | background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 129 | background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(39%, rgba(0, 0, 0, 0.39)), color-stop(39%, rgba(0, 0, 0, 0.39)), color-stop(100%, black)); 130 | background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 131 | background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 132 | background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 133 | background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 134 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0); 135 | } 136 | .video-js .vjs-icon-placeholder:before, 137 | .vjs-default-skin .vjs-icon-placeholder:before { 138 | font-size: 25px; 139 | height: auto; 140 | padding: 0; 141 | margin: 0; 142 | line-height: 44px; 143 | width: 44px; 144 | } 145 | .video-js .vjs-icon-placeholder:focus:before, .video-js .vjs-icon-placeholder:hover:before, 146 | .vjs-default-skin .vjs-icon-placeholder:focus:before, 147 | .vjs-default-skin .vjs-icon-placeholder:hover:before { 148 | box-shadow: none; 149 | text-shadow: none; 150 | } 151 | .video-js .vjs-live-control, 152 | .vjs-default-skin .vjs-live-control { 153 | top: -34px; 154 | left: 0; 155 | right: 0; 156 | margin: auto; 157 | position: absolute; 158 | } 159 | .video-js .vjs-current-time, 160 | .video-js .vjs-remaining-time, 161 | .vjs-default-skin .vjs-current-time, 162 | .vjs-default-skin .vjs-remaining-time { 163 | right: 82px; 164 | } 165 | .video-js .vjs-duration, 166 | .vjs-default-skin .vjs-duration { 167 | right: 50px; 168 | } 169 | .video-js .vjs-time-divider, 170 | .vjs-default-skin .vjs-time-divider { 171 | right: 75px; 172 | } 173 | .video-js .vjs-playback-rate .vjs-menu, 174 | .vjs-default-skin .vjs-playback-rate .vjs-menu { 175 | width: 44px; 176 | bottom: 14px; 177 | } 178 | .video-js .vjs-playback-rate .vjs-playback-rate-value, 179 | .vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value { 180 | line-height: 44px; 181 | } 182 | .video-js .vjs-current-time, 183 | .video-js .vjs-duration, 184 | .video-js .vjs-time-divider, 185 | .vjs-default-skin .vjs-current-time, 186 | .vjs-default-skin .vjs-duration, 187 | .vjs-default-skin .vjs-time-divider { 188 | position: absolute; 189 | height: 44px; 190 | display: block; 191 | bottom: 0; 192 | } 193 | .video-js .vjs-current-time > div, 194 | .video-js .vjs-duration > div, 195 | .video-js .vjs-time-divider > div, 196 | .vjs-default-skin .vjs-current-time > div, 197 | .vjs-default-skin .vjs-duration > div, 198 | .vjs-default-skin .vjs-time-divider > div { 199 | line-height: 44px; 200 | height: 44px; 201 | } 202 | .video-js .vjs-remaining-time, 203 | .vjs-default-skin .vjs-remaining-time { 204 | display: none; 205 | } 206 | .video-js .vjs-control, 207 | .vjs-default-skin .vjs-control { 208 | width: 44px; 209 | height: 44px; 210 | transition: background-color .5s ease; 211 | bottom: 0; 212 | } 213 | .video-js .vjs-control.vjs-fullscreen-control, .video-js .vjs-control.vjs-subs-caps-button, .video-js .vjs-control.vjs-playback-rate, .video-js .vjs-control.vjs-captions-button, .video-js .vjs-control.vjs-chapters-button, .video-js .vjs-control.vjs-volume-menu-button, .video-js .vjs-control.vjs-quality-button, .video-js .vjs-control.vjs-descriptions-button, .video-js .vjs-control.vjs-audio-button, 214 | .vjs-default-skin .vjs-control.vjs-fullscreen-control, 215 | .vjs-default-skin .vjs-control.vjs-subs-caps-button, 216 | .vjs-default-skin .vjs-control.vjs-playback-rate, 217 | .vjs-default-skin .vjs-control.vjs-captions-button, 218 | .vjs-default-skin .vjs-control.vjs-chapters-button, 219 | .vjs-default-skin .vjs-control.vjs-volume-menu-button, 220 | .vjs-default-skin .vjs-control.vjs-quality-button, 221 | .vjs-default-skin .vjs-control.vjs-descriptions-button, 222 | .vjs-default-skin .vjs-control.vjs-audio-button { 223 | width: 44px; 224 | height: 44px; 225 | transition: background-color .5s ease; 226 | bottom: -76px; 227 | position: relative; 228 | } 229 | .video-js .vjs-control:hover, .video-js .vjs-control:focus, 230 | .vjs-default-skin .vjs-control:hover, 231 | .vjs-default-skin .vjs-control:focus { 232 | background-color: #bb1919; 233 | } 234 | .video-js .vjs-progress-control, 235 | .vjs-default-skin .vjs-progress-control { 236 | bottom: 40px; 237 | width: 100%; 238 | position: absolute; 239 | } 240 | .video-js .vjs-progress-control .vjs-slider, 241 | .vjs-default-skin .vjs-progress-control .vjs-slider { 242 | height: 6px; 243 | margin: 0 10px; 244 | } 245 | .video-js .vjs-progress-control .vjs-slider-handle, 246 | .vjs-default-skin .vjs-progress-control .vjs-slider-handle { 247 | top: 40%; 248 | } 249 | .video-js .vjs-progress-control:hover, .video-js .vjs-progress-control:focus, 250 | .video-js .vjs-current-time:hover, 251 | .video-js .vjs-current-time:focus, 252 | .video-js .vjs-duration:hover, 253 | .video-js .vjs-duration:focus, 254 | .video-js .vjs-time-divider:hover, 255 | .video-js .vjs-time-divider:focus, 256 | .video-js .vjs-volume-control:hover, 257 | .video-js .vjs-volume-control:focus, 258 | .video-js .vjs-close-button:hover, 259 | .video-js .vjs-close-button:focus, 260 | .video-js .vjs-live-control:hover, 261 | .video-js .vjs-live-control:focus, 262 | .vjs-default-skin .vjs-progress-control:hover, 263 | .vjs-default-skin .vjs-progress-control:focus, 264 | .vjs-default-skin .vjs-current-time:hover, 265 | .vjs-default-skin .vjs-current-time:focus, 266 | .vjs-default-skin .vjs-duration:hover, 267 | .vjs-default-skin .vjs-duration:focus, 268 | .vjs-default-skin .vjs-time-divider:hover, 269 | .vjs-default-skin .vjs-time-divider:focus, 270 | .vjs-default-skin .vjs-volume-control:hover, 271 | .vjs-default-skin .vjs-volume-control:focus, 272 | .vjs-default-skin .vjs-close-button:hover, 273 | .vjs-default-skin .vjs-close-button:focus, 274 | .vjs-default-skin .vjs-live-control:hover, 275 | .vjs-default-skin .vjs-live-control:focus { 276 | background-color: transparent; 277 | } 278 | .video-js .vjs-play-control, 279 | .vjs-default-skin .vjs-play-control { 280 | position: absolute; 281 | left: 0; 282 | } 283 | .video-js .vjs-fullscreen-control, 284 | .vjs-default-skin .vjs-fullscreen-control { 285 | margin-left: 85px !important; 286 | right: 0; 287 | position: absolute; 288 | } 289 | .video-js .vjs-volume-menu-button, 290 | .video-js .vjs-volume-panel, 291 | .vjs-default-skin .vjs-volume-menu-button, 292 | .vjs-default-skin .vjs-volume-panel { 293 | position: absolute; 294 | left: 44px; 295 | } 296 | .video-js .vjs-volume-menu-button:hover, .video-js .vjs-volume-menu-button:focus, 297 | .video-js .vjs-volume-panel:hover, 298 | .video-js .vjs-volume-panel:focus, 299 | .vjs-default-skin .vjs-volume-menu-button:hover, 300 | .vjs-default-skin .vjs-volume-menu-button:focus, 301 | .vjs-default-skin .vjs-volume-panel:hover, 302 | .vjs-default-skin .vjs-volume-panel:focus { 303 | background-color: transparent; 304 | } 305 | .video-js .vjs-volume-menu-button:hover:before, .video-js .vjs-volume-menu-button:focus:before, 306 | .video-js .vjs-volume-panel:hover:before, 307 | .video-js .vjs-volume-panel:focus:before, 308 | .vjs-default-skin .vjs-volume-menu-button:hover:before, 309 | .vjs-default-skin .vjs-volume-menu-button:focus:before, 310 | .vjs-default-skin .vjs-volume-panel:hover:before, 311 | .vjs-default-skin .vjs-volume-panel:focus:before { 312 | background-color: #bb1919; 313 | } 314 | .video-js .vjs-volume-menu-button:before, 315 | .video-js .vjs-volume-panel:before, 316 | .vjs-default-skin .vjs-volume-menu-button:before, 317 | .vjs-default-skin .vjs-volume-panel:before { 318 | width: 44px; 319 | left: 0; 320 | top: 50%; 321 | -webkit-transform: translate(0%, -50%); 322 | -ms-transform: translate(0%, -50%); 323 | transform: translate(0%, -50%); 324 | } 325 | .video-js .vjs-volume-bar, 326 | .video-js .vjs-volume-level, 327 | .vjs-default-skin .vjs-volume-bar, 328 | .vjs-default-skin .vjs-volume-level { 329 | height: 6px; 330 | } 331 | .video-js .vjs-volume-bar, 332 | .vjs-default-skin .vjs-volume-bar { 333 | top: 24%; 334 | margin: 0; 335 | left: 4px; 336 | width: 80px; 337 | } 338 | .video-js .vjs-seek-handle, 339 | .vjs-default-skin .vjs-seek-handle { 340 | height: auto; 341 | } 342 | .video-js .vjs-slider-handle:before, 343 | .video-js .vjs-volume-bar .vjs-volume-handle:before, 344 | .vjs-default-skin .vjs-slider-handle:before, 345 | .vjs-default-skin .vjs-volume-bar .vjs-volume-handle:before { 346 | width: 10px; 347 | height: 16px; 348 | background-color: #FFFFFF; 349 | position: absolute; 350 | right: 0; 351 | top: -5px; 352 | -webkit-transform: none; 353 | -ms-transform: none; 354 | transform: none; 355 | content: ""; 356 | font-family: none; 357 | } 358 | .video-js .vjs-live-controls, 359 | .vjs-default-skin .vjs-live-controls { 360 | display: none; 361 | } 362 | .video-js .vjs-menu-button-inline:hover, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline.vjs-slider-active, 363 | .vjs-default-skin .vjs-menu-button-inline:hover, 364 | .vjs-default-skin .vjs-menu-button-inline:focus, 365 | .vjs-default-skin .vjs-menu-button-inline.vjs-slider-active { 366 | width: 14em; 367 | } 368 | .video-js .vjs-menu-button-inline .vjs-menu, 369 | .vjs-default-skin .vjs-menu-button-inline .vjs-menu { 370 | left: 97px; 371 | } 372 | .video-js .vjs-menu-button-inline .vjs-menu .vjs-menu-content, 373 | .vjs-default-skin .vjs-menu-button-inline .vjs-menu .vjs-menu-content { 374 | position: absolute; 375 | top: 50%; 376 | left: 50%; 377 | -webkit-transform: translate(-50%, -50%); 378 | -ms-transform: translate(-50%, -50%); 379 | transform: translate(-50%, -50%); 380 | overflow: visible; 381 | height: auto; 382 | width: 8em; 383 | } 384 | .video-js.vjs-no-flex .vjs-menu-button-inline, 385 | .vjs-default-skin.vjs-no-flex .vjs-menu-button-inline { 386 | width: 14em; 387 | } 388 | .video-js .vjs-time-tooltip, 389 | .vjs-default-skin .vjs-time-tooltip { 390 | line-height: 10px; 391 | left: 15px; 392 | } 393 | .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, 394 | .vjs-default-skin .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, 395 | .vjs-default-skin .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, 396 | .vjs-default-skin .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal { 397 | top: 24%; 398 | margin: 0; 399 | left: 4px; 400 | width: 80px; 401 | } 402 | .video-js .vjs-volume-panel .vjs-volume-control, 403 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control { 404 | top: 24%; 405 | margin: 0; 406 | left: 4px; 407 | width: 0; 408 | } 409 | .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal, 410 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, 411 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, 412 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal { 413 | top: 24%; 414 | margin: 0; 415 | left: 4px; 416 | width: 80px; 417 | } 418 | .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal, 419 | .vjs-default-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, 420 | .vjs-default-skin .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal, 421 | .vjs-default-skin .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal { 422 | top: 24%; 423 | margin: 0; 424 | left: 4px; 425 | width: 80px; 426 | } 427 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal, 428 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { 429 | top: 24%; 430 | margin: 0; 431 | left: 4px; 432 | width: 80px; 433 | } 434 | 435 | /*# sourceMappingURL=videojs-iplayer-theme.css.map */ 436 | -------------------------------------------------------------------------------- /dist/videojs-iplayer-theme.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../src/scss/videojs-iplayer-theme.scss"], 5 | "names": [], 6 | "file": "videojs-iplayer-theme.css" 7 | } 8 | -------------------------------------------------------------------------------- /dist/videojs-iplayer-theme.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * videojs-iplayer-skin-1 3 | * A Video.JS skin modelled on the new iPlayer theme. 4 | * 5 | * @author Vijay Dubb 6 | * @version 1.0.0 7 | * Copyright 2017. MIT licensed. 8 | */ 9 | 10 | .video-js .vjs-loading-spinner,.vjs-default-skin .vjs-loading-spinner{border-color:#bb1919}.video-js .vjs-loading-spinner:before,.video-js .vjs-loading-spinner:after,.vjs-default-skin .vjs-loading-spinner:before,.vjs-default-skin .vjs-loading-spinner:after{border-color:#bb1919}.video-js.vjs-paused .vjs-tech,.video-js.vjs-paused .vjs-big-play-button,.vjs-default-skin.vjs-paused .vjs-tech,.vjs-default-skin.vjs-paused .vjs-big-play-button{z-index:2}.video-js.vjs-paused .vjs-control-bar,.vjs-default-skin.vjs-paused .vjs-control-bar{z-index:-1}.video-js.vjs-has-started .vjs-tech,.video-js.vjs-has-started .vjs-big-play-button,.vjs-default-skin.vjs-has-started .vjs-tech,.vjs-default-skin.vjs-has-started .vjs-big-play-button{z-index:0}.video-js.vjs-has-started .vjs-control-bar,.vjs-default-skin.vjs-has-started .vjs-control-bar{z-index:2}.video-js .vjs-menu,.vjs-default-skin .vjs-menu{bottom:14px}.video-js .vjs-big-play-button,.vjs-default-skin .vjs-big-play-button{background-color:rgba(0,0,0,0.5);position:absolute;margin:0;border-radius:0;border:none;width:85px;height:85px;bottom:0;left:0;top:auto;box-shadow:none;transition:background-color .5s ease}.video-js .vjs-big-play-button .vjs-icon-placeholder:hover,.video-js .vjs-big-play-button .vjs-icon-placeholder:focus,.vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:hover,.vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:focus{background-color:#bb1919}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:before{font-size:60px;height:auto;padding:0;margin:0;line-height:85px}.video-js:hover .vjs-big-play-button,.video-js:hover .vjs-big-play-button:focus,.video-js:focus .vjs-big-play-button,.video-js:focus .vjs-big-play-button:focus,.vjs-default-skin:hover .vjs-big-play-button,.vjs-default-skin:hover .vjs-big-play-button:focus,.vjs-default-skin:focus .vjs-big-play-button,.vjs-default-skin:focus .vjs-big-play-button:focus{border-color:transparent;box-shadow:none;background-color:#bb1919}.video-js .vjs-load-progress,.vjs-default-skin .vjs-load-progress{background:#e0e0e0}.video-js .vjs-progress-holder .vjs-play-progress,.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.vjs-default-skin .vjs-progress-holder .vjs-play-progress,.vjs-default-skin .vjs-progress-holder .vjs-load-progress,.vjs-default-skin .vjs-progress-holder .vjs-load-progress div{height:6px;line-height:44px}.video-js .vjs-volume-level,.video-js .vjs-play-progress,.vjs-default-skin .vjs-volume-level,.vjs-default-skin .vjs-play-progress{background-color:#bb1919}.video-js .vjs-volume-level:before,.video-js .vjs-play-progress:before,.vjs-default-skin .vjs-volume-level:before,.vjs-default-skin .vjs-play-progress:before{right:-8px;font-size:0.9em;height:14px;width:9px;background:#fff;padding:0;margin:0;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:''}.video-js .vjs-control-bar,.vjs-default-skin .vjs-control-bar{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:flex-end;justify-content:flex-end;height:120px;background:-moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.39) 39%, rgba(0,0,0,0.39) 39%, #000 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(39%, rgba(0,0,0,0.39)), color-stop(39%, rgba(0,0,0,0.39)), color-stop(100%, #000));background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.39) 39%, rgba(0,0,0,0.39) 39%, #000 100%);background:-o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.39) 39%, rgba(0,0,0,0.39) 39%, #000 100%);background:-ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.39) 39%, rgba(0,0,0,0.39) 39%, #000 100%);background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.39) 39%, rgba(0,0,0,0.39) 39%, #000 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0)}.video-js .vjs-icon-placeholder:before,.vjs-default-skin .vjs-icon-placeholder:before{font-size:25px;height:auto;padding:0;margin:0;line-height:44px;width:44px}.video-js .vjs-icon-placeholder:focus:before,.video-js .vjs-icon-placeholder:hover:before,.vjs-default-skin .vjs-icon-placeholder:focus:before,.vjs-default-skin .vjs-icon-placeholder:hover:before{box-shadow:none;text-shadow:none}.video-js .vjs-live-control,.vjs-default-skin .vjs-live-control{top:-34px;left:0;right:0;margin:auto;position:absolute}.video-js .vjs-current-time,.video-js .vjs-remaining-time,.vjs-default-skin .vjs-current-time,.vjs-default-skin .vjs-remaining-time{right:82px}.video-js .vjs-duration,.vjs-default-skin .vjs-duration{right:50px}.video-js .vjs-time-divider,.vjs-default-skin .vjs-time-divider{right:75px}.video-js .vjs-playback-rate .vjs-menu,.vjs-default-skin .vjs-playback-rate .vjs-menu{width:44px;bottom:14px}.video-js .vjs-playback-rate .vjs-playback-rate-value,.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value{line-height:44px}.video-js .vjs-current-time,.video-js .vjs-duration,.video-js .vjs-time-divider,.vjs-default-skin .vjs-current-time,.vjs-default-skin .vjs-duration,.vjs-default-skin .vjs-time-divider{position:absolute;height:44px;display:block;bottom:0}.video-js .vjs-current-time>div,.video-js .vjs-duration>div,.video-js .vjs-time-divider>div,.vjs-default-skin .vjs-current-time>div,.vjs-default-skin .vjs-duration>div,.vjs-default-skin .vjs-time-divider>div{line-height:44px;height:44px}.video-js .vjs-remaining-time,.vjs-default-skin .vjs-remaining-time{display:none}.video-js .vjs-control,.vjs-default-skin .vjs-control{width:44px;height:44px;transition:background-color .5s ease;bottom:0}.video-js .vjs-control.vjs-fullscreen-control,.video-js .vjs-control.vjs-subs-caps-button,.video-js .vjs-control.vjs-playback-rate,.video-js .vjs-control.vjs-captions-button,.video-js .vjs-control.vjs-chapters-button,.video-js .vjs-control.vjs-volume-menu-button,.video-js .vjs-control.vjs-quality-button,.video-js .vjs-control.vjs-descriptions-button,.video-js .vjs-control.vjs-audio-button,.vjs-default-skin .vjs-control.vjs-fullscreen-control,.vjs-default-skin .vjs-control.vjs-subs-caps-button,.vjs-default-skin .vjs-control.vjs-playback-rate,.vjs-default-skin .vjs-control.vjs-captions-button,.vjs-default-skin .vjs-control.vjs-chapters-button,.vjs-default-skin .vjs-control.vjs-volume-menu-button,.vjs-default-skin .vjs-control.vjs-quality-button,.vjs-default-skin .vjs-control.vjs-descriptions-button,.vjs-default-skin .vjs-control.vjs-audio-button{width:44px;height:44px;transition:background-color .5s ease;bottom:-76px;position:relative}.video-js .vjs-control:hover,.video-js .vjs-control:focus,.vjs-default-skin .vjs-control:hover,.vjs-default-skin .vjs-control:focus{background-color:#bb1919}.video-js .vjs-progress-control,.vjs-default-skin .vjs-progress-control{bottom:40px;width:100%;position:absolute}.video-js .vjs-progress-control .vjs-slider,.vjs-default-skin .vjs-progress-control .vjs-slider{height:6px;margin:0 10px}.video-js .vjs-progress-control .vjs-slider-handle,.vjs-default-skin .vjs-progress-control .vjs-slider-handle{top:40%}.video-js .vjs-progress-control:hover,.video-js .vjs-progress-control:focus,.video-js .vjs-current-time:hover,.video-js .vjs-current-time:focus,.video-js .vjs-duration:hover,.video-js .vjs-duration:focus,.video-js .vjs-time-divider:hover,.video-js .vjs-time-divider:focus,.video-js .vjs-volume-control:hover,.video-js .vjs-volume-control:focus,.video-js .vjs-close-button:hover,.video-js .vjs-close-button:focus,.video-js .vjs-live-control:hover,.video-js .vjs-live-control:focus,.vjs-default-skin .vjs-progress-control:hover,.vjs-default-skin .vjs-progress-control:focus,.vjs-default-skin .vjs-current-time:hover,.vjs-default-skin .vjs-current-time:focus,.vjs-default-skin .vjs-duration:hover,.vjs-default-skin .vjs-duration:focus,.vjs-default-skin .vjs-time-divider:hover,.vjs-default-skin .vjs-time-divider:focus,.vjs-default-skin .vjs-volume-control:hover,.vjs-default-skin .vjs-volume-control:focus,.vjs-default-skin .vjs-close-button:hover,.vjs-default-skin .vjs-close-button:focus,.vjs-default-skin .vjs-live-control:hover,.vjs-default-skin .vjs-live-control:focus{background-color:transparent}.video-js .vjs-play-control,.vjs-default-skin .vjs-play-control{position:absolute;left:0}.video-js .vjs-fullscreen-control,.vjs-default-skin .vjs-fullscreen-control{margin-left:85px !important;right:0;position:absolute}.video-js .vjs-volume-menu-button,.video-js .vjs-volume-panel,.vjs-default-skin .vjs-volume-menu-button,.vjs-default-skin .vjs-volume-panel{position:absolute;left:44px}.video-js .vjs-volume-menu-button:hover,.video-js .vjs-volume-menu-button:focus,.video-js .vjs-volume-panel:hover,.video-js .vjs-volume-panel:focus,.vjs-default-skin .vjs-volume-menu-button:hover,.vjs-default-skin .vjs-volume-menu-button:focus,.vjs-default-skin .vjs-volume-panel:hover,.vjs-default-skin .vjs-volume-panel:focus{background-color:transparent}.video-js .vjs-volume-menu-button:hover:before,.video-js .vjs-volume-menu-button:focus:before,.video-js .vjs-volume-panel:hover:before,.video-js .vjs-volume-panel:focus:before,.vjs-default-skin .vjs-volume-menu-button:hover:before,.vjs-default-skin .vjs-volume-menu-button:focus:before,.vjs-default-skin .vjs-volume-panel:hover:before,.vjs-default-skin .vjs-volume-panel:focus:before{background-color:#bb1919}.video-js .vjs-volume-menu-button:before,.video-js .vjs-volume-panel:before,.vjs-default-skin .vjs-volume-menu-button:before,.vjs-default-skin .vjs-volume-panel:before{width:44px;left:0;top:50%;-webkit-transform:translate(0%, -50%);-ms-transform:translate(0%, -50%);transform:translate(0%, -50%)}.video-js .vjs-volume-bar,.video-js .vjs-volume-level,.vjs-default-skin .vjs-volume-bar,.vjs-default-skin .vjs-volume-level{height:6px}.video-js .vjs-volume-bar,.vjs-default-skin .vjs-volume-bar{top:24%;margin:0;left:4px;width:80px}.video-js .vjs-seek-handle,.vjs-default-skin .vjs-seek-handle{height:auto}.video-js .vjs-slider-handle:before,.video-js .vjs-volume-bar .vjs-volume-handle:before,.vjs-default-skin .vjs-slider-handle:before,.vjs-default-skin .vjs-volume-bar .vjs-volume-handle:before{width:10px;height:16px;background-color:#fff;position:absolute;right:0;top:-5px;-webkit-transform:none;-ms-transform:none;transform:none;content:"";font-family:none}.video-js .vjs-live-controls,.vjs-default-skin .vjs-live-controls{display:none}.video-js .vjs-menu-button-inline:hover,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline.vjs-slider-active,.vjs-default-skin .vjs-menu-button-inline:hover,.vjs-default-skin .vjs-menu-button-inline:focus,.vjs-default-skin .vjs-menu-button-inline.vjs-slider-active{width:14em}.video-js .vjs-menu-button-inline .vjs-menu,.vjs-default-skin .vjs-menu-button-inline .vjs-menu{left:97px}.video-js .vjs-menu-button-inline .vjs-menu .vjs-menu-content,.vjs-default-skin .vjs-menu-button-inline .vjs-menu .vjs-menu-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);overflow:visible;height:auto;width:8em}.video-js.vjs-no-flex .vjs-menu-button-inline,.vjs-default-skin.vjs-no-flex .vjs-menu-button-inline{width:14em}.video-js .vjs-time-tooltip,.vjs-default-skin .vjs-time-tooltip{line-height:10px;left:15px}.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal{top:24%;margin:0;left:4px;width:80px}.video-js .vjs-volume-panel .vjs-volume-control,.vjs-default-skin .vjs-volume-panel .vjs-volume-control{top:24%;margin:0;left:4px;width:0}.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal{top:24%;margin:0;left:4px;width:80px}.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal{top:24%;margin:0;left:4px;width:80px}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{top:24%;margin:0;left:4px;width:80px} 11 | /*# sourceMappingURL=videojs-iplayer-theme.min.css.map */ 12 | -------------------------------------------------------------------------------- /dist/videojs-iplayer-theme.min.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../src/scss/videojs-iplayer-theme.scss"], 5 | "names": [], 6 | "file": "videojs-iplayer-theme.min.css" 7 | } 8 | -------------------------------------------------------------------------------- /example/css/videojs-iplayer-theme.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * videojs-iplayer-skin-1 3 | * A Video.JS skin modelled on the new iPlayer theme. 4 | * 5 | * @author Vijay Dubb 6 | * @version 1.0.0 7 | * Copyright 2017. MIT licensed. 8 | */ 9 | 10 | .video-js .vjs-loading-spinner, 11 | .vjs-default-skin .vjs-loading-spinner { 12 | border-color: #bb1919; 13 | } 14 | .video-js .vjs-loading-spinner:before, .video-js .vjs-loading-spinner:after, 15 | .vjs-default-skin .vjs-loading-spinner:before, 16 | .vjs-default-skin .vjs-loading-spinner:after { 17 | border-color: #bb1919; 18 | } 19 | .video-js.vjs-paused .vjs-tech, 20 | .video-js.vjs-paused .vjs-big-play-button, 21 | .vjs-default-skin.vjs-paused .vjs-tech, 22 | .vjs-default-skin.vjs-paused .vjs-big-play-button { 23 | z-index: 2; 24 | } 25 | .video-js.vjs-paused .vjs-control-bar, 26 | .vjs-default-skin.vjs-paused .vjs-control-bar { 27 | z-index: -1; 28 | } 29 | .video-js.vjs-has-started .vjs-tech, 30 | .video-js.vjs-has-started .vjs-big-play-button, 31 | .vjs-default-skin.vjs-has-started .vjs-tech, 32 | .vjs-default-skin.vjs-has-started .vjs-big-play-button { 33 | z-index: 0; 34 | } 35 | .video-js.vjs-has-started .vjs-control-bar, 36 | .vjs-default-skin.vjs-has-started .vjs-control-bar { 37 | z-index: 2; 38 | } 39 | .video-js .vjs-menu, 40 | .vjs-default-skin .vjs-menu { 41 | bottom: 14px; 42 | } 43 | .video-js .vjs-big-play-button, 44 | .vjs-default-skin .vjs-big-play-button { 45 | background-color: rgba(0, 0, 0, 0.5); 46 | position: absolute; 47 | margin: 0; 48 | border-radius: 0; 49 | border: none; 50 | width: 85px; 51 | height: 85px; 52 | bottom: 0; 53 | left: 0; 54 | top: auto; 55 | box-shadow: none; 56 | transition: background-color .5s ease; 57 | } 58 | .video-js .vjs-big-play-button .vjs-icon-placeholder:hover, .video-js .vjs-big-play-button .vjs-icon-placeholder:focus, 59 | .vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:hover, 60 | .vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:focus { 61 | background-color: #bb1919; 62 | } 63 | .video-js .vjs-big-play-button .vjs-icon-placeholder:before, 64 | .vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:before { 65 | font-size: 60px; 66 | height: auto; 67 | padding: 0; 68 | margin: 0; 69 | line-height: 85px; 70 | } 71 | .video-js:hover .vjs-big-play-button, 72 | .video-js:hover .vjs-big-play-button:focus, .video-js:focus .vjs-big-play-button, 73 | .video-js:focus .vjs-big-play-button:focus, 74 | .vjs-default-skin:hover .vjs-big-play-button, 75 | .vjs-default-skin:hover .vjs-big-play-button:focus, 76 | .vjs-default-skin:focus .vjs-big-play-button, 77 | .vjs-default-skin:focus .vjs-big-play-button:focus { 78 | border-color: transparent; 79 | box-shadow: none; 80 | background-color: #bb1919; 81 | } 82 | .video-js .vjs-load-progress, 83 | .vjs-default-skin .vjs-load-progress { 84 | background: #e0e0e0; 85 | } 86 | .video-js .vjs-progress-holder .vjs-play-progress, 87 | .video-js .vjs-progress-holder .vjs-load-progress, 88 | .video-js .vjs-progress-holder .vjs-load-progress div, 89 | .vjs-default-skin .vjs-progress-holder .vjs-play-progress, 90 | .vjs-default-skin .vjs-progress-holder .vjs-load-progress, 91 | .vjs-default-skin .vjs-progress-holder .vjs-load-progress div { 92 | height: 6px; 93 | line-height: 44px; 94 | } 95 | .video-js .vjs-volume-level, 96 | .video-js .vjs-play-progress, 97 | .vjs-default-skin .vjs-volume-level, 98 | .vjs-default-skin .vjs-play-progress { 99 | background-color: #bb1919; 100 | } 101 | .video-js .vjs-volume-level:before, 102 | .video-js .vjs-play-progress:before, 103 | .vjs-default-skin .vjs-volume-level:before, 104 | .vjs-default-skin .vjs-play-progress:before { 105 | right: -8px; 106 | font-size: 0.9em; 107 | height: 14px; 108 | width: 9px; 109 | background: #FFFFFF; 110 | padding: 0; 111 | margin: 0; 112 | position: absolute; 113 | top: 50%; 114 | -webkit-transform: translate(-50%, -50%); 115 | -ms-transform: translate(-50%, -50%); 116 | transform: translate(-50%, -50%); 117 | content: ''; 118 | } 119 | .video-js .vjs-control-bar, 120 | .vjs-default-skin .vjs-control-bar { 121 | display: -webkit-flex; 122 | display: flex; 123 | -webkit-flex-direction: row; 124 | flex-direction: row; 125 | -webkit-justify-content: flex-end; 126 | justify-content: flex-end; 127 | height: 120px; 128 | background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 129 | background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(39%, rgba(0, 0, 0, 0.39)), color-stop(39%, rgba(0, 0, 0, 0.39)), color-stop(100%, black)); 130 | background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 131 | background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 132 | background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 133 | background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, black 100%); 134 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0); 135 | } 136 | .video-js .vjs-icon-placeholder:before, 137 | .vjs-default-skin .vjs-icon-placeholder:before { 138 | font-size: 25px; 139 | height: auto; 140 | padding: 0; 141 | margin: 0; 142 | line-height: 44px; 143 | width: 44px; 144 | } 145 | .video-js .vjs-icon-placeholder:focus:before, .video-js .vjs-icon-placeholder:hover:before, 146 | .vjs-default-skin .vjs-icon-placeholder:focus:before, 147 | .vjs-default-skin .vjs-icon-placeholder:hover:before { 148 | box-shadow: none; 149 | text-shadow: none; 150 | } 151 | .video-js .vjs-live-control, 152 | .vjs-default-skin .vjs-live-control { 153 | top: -34px; 154 | left: 0; 155 | right: 0; 156 | margin: auto; 157 | position: absolute; 158 | } 159 | .video-js .vjs-current-time, 160 | .video-js .vjs-remaining-time, 161 | .vjs-default-skin .vjs-current-time, 162 | .vjs-default-skin .vjs-remaining-time { 163 | right: 82px; 164 | } 165 | .video-js .vjs-duration, 166 | .vjs-default-skin .vjs-duration { 167 | right: 50px; 168 | } 169 | .video-js .vjs-time-divider, 170 | .vjs-default-skin .vjs-time-divider { 171 | right: 75px; 172 | } 173 | .video-js .vjs-playback-rate .vjs-menu, 174 | .vjs-default-skin .vjs-playback-rate .vjs-menu { 175 | width: 44px; 176 | bottom: 14px; 177 | } 178 | .video-js .vjs-playback-rate .vjs-playback-rate-value, 179 | .vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value { 180 | line-height: 44px; 181 | } 182 | .video-js .vjs-current-time, 183 | .video-js .vjs-duration, 184 | .video-js .vjs-time-divider, 185 | .vjs-default-skin .vjs-current-time, 186 | .vjs-default-skin .vjs-duration, 187 | .vjs-default-skin .vjs-time-divider { 188 | position: absolute; 189 | height: 44px; 190 | display: block; 191 | bottom: 0; 192 | } 193 | .video-js .vjs-current-time > div, 194 | .video-js .vjs-duration > div, 195 | .video-js .vjs-time-divider > div, 196 | .vjs-default-skin .vjs-current-time > div, 197 | .vjs-default-skin .vjs-duration > div, 198 | .vjs-default-skin .vjs-time-divider > div { 199 | line-height: 44px; 200 | height: 44px; 201 | } 202 | .video-js .vjs-remaining-time, 203 | .vjs-default-skin .vjs-remaining-time { 204 | display: none; 205 | } 206 | .video-js .vjs-control, 207 | .vjs-default-skin .vjs-control { 208 | width: 44px; 209 | height: 44px; 210 | transition: background-color .5s ease; 211 | bottom: 0; 212 | } 213 | .video-js .vjs-control.vjs-fullscreen-control, .video-js .vjs-control.vjs-subs-caps-button, .video-js .vjs-control.vjs-playback-rate, .video-js .vjs-control.vjs-captions-button, .video-js .vjs-control.vjs-chapters-button, .video-js .vjs-control.vjs-volume-menu-button, .video-js .vjs-control.vjs-quality-button, .video-js .vjs-control.vjs-descriptions-button, .video-js .vjs-control.vjs-audio-button, 214 | .vjs-default-skin .vjs-control.vjs-fullscreen-control, 215 | .vjs-default-skin .vjs-control.vjs-subs-caps-button, 216 | .vjs-default-skin .vjs-control.vjs-playback-rate, 217 | .vjs-default-skin .vjs-control.vjs-captions-button, 218 | .vjs-default-skin .vjs-control.vjs-chapters-button, 219 | .vjs-default-skin .vjs-control.vjs-volume-menu-button, 220 | .vjs-default-skin .vjs-control.vjs-quality-button, 221 | .vjs-default-skin .vjs-control.vjs-descriptions-button, 222 | .vjs-default-skin .vjs-control.vjs-audio-button { 223 | width: 44px; 224 | height: 44px; 225 | transition: background-color .5s ease; 226 | bottom: -76px; 227 | position: relative; 228 | } 229 | .video-js .vjs-control:hover, .video-js .vjs-control:focus, 230 | .vjs-default-skin .vjs-control:hover, 231 | .vjs-default-skin .vjs-control:focus { 232 | background-color: #bb1919; 233 | } 234 | .video-js .vjs-progress-control, 235 | .vjs-default-skin .vjs-progress-control { 236 | bottom: 40px; 237 | width: 100%; 238 | position: absolute; 239 | } 240 | .video-js .vjs-progress-control .vjs-slider, 241 | .vjs-default-skin .vjs-progress-control .vjs-slider { 242 | height: 6px; 243 | margin: 0 10px; 244 | } 245 | .video-js .vjs-progress-control .vjs-slider-handle, 246 | .vjs-default-skin .vjs-progress-control .vjs-slider-handle { 247 | top: 40%; 248 | } 249 | .video-js .vjs-progress-control:hover, .video-js .vjs-progress-control:focus, 250 | .video-js .vjs-current-time:hover, 251 | .video-js .vjs-current-time:focus, 252 | .video-js .vjs-duration:hover, 253 | .video-js .vjs-duration:focus, 254 | .video-js .vjs-time-divider:hover, 255 | .video-js .vjs-time-divider:focus, 256 | .video-js .vjs-volume-control:hover, 257 | .video-js .vjs-volume-control:focus, 258 | .video-js .vjs-close-button:hover, 259 | .video-js .vjs-close-button:focus, 260 | .video-js .vjs-live-control:hover, 261 | .video-js .vjs-live-control:focus, 262 | .vjs-default-skin .vjs-progress-control:hover, 263 | .vjs-default-skin .vjs-progress-control:focus, 264 | .vjs-default-skin .vjs-current-time:hover, 265 | .vjs-default-skin .vjs-current-time:focus, 266 | .vjs-default-skin .vjs-duration:hover, 267 | .vjs-default-skin .vjs-duration:focus, 268 | .vjs-default-skin .vjs-time-divider:hover, 269 | .vjs-default-skin .vjs-time-divider:focus, 270 | .vjs-default-skin .vjs-volume-control:hover, 271 | .vjs-default-skin .vjs-volume-control:focus, 272 | .vjs-default-skin .vjs-close-button:hover, 273 | .vjs-default-skin .vjs-close-button:focus, 274 | .vjs-default-skin .vjs-live-control:hover, 275 | .vjs-default-skin .vjs-live-control:focus { 276 | background-color: transparent; 277 | } 278 | .video-js .vjs-play-control, 279 | .vjs-default-skin .vjs-play-control { 280 | position: absolute; 281 | left: 0; 282 | } 283 | .video-js .vjs-fullscreen-control, 284 | .vjs-default-skin .vjs-fullscreen-control { 285 | margin-left: 85px !important; 286 | right: 0; 287 | position: absolute; 288 | } 289 | .video-js .vjs-volume-menu-button, 290 | .video-js .vjs-volume-panel, 291 | .vjs-default-skin .vjs-volume-menu-button, 292 | .vjs-default-skin .vjs-volume-panel { 293 | position: absolute; 294 | left: 44px; 295 | } 296 | .video-js .vjs-volume-menu-button:hover, .video-js .vjs-volume-menu-button:focus, 297 | .video-js .vjs-volume-panel:hover, 298 | .video-js .vjs-volume-panel:focus, 299 | .vjs-default-skin .vjs-volume-menu-button:hover, 300 | .vjs-default-skin .vjs-volume-menu-button:focus, 301 | .vjs-default-skin .vjs-volume-panel:hover, 302 | .vjs-default-skin .vjs-volume-panel:focus { 303 | background-color: transparent; 304 | } 305 | .video-js .vjs-volume-menu-button:hover:before, .video-js .vjs-volume-menu-button:focus:before, 306 | .video-js .vjs-volume-panel:hover:before, 307 | .video-js .vjs-volume-panel:focus:before, 308 | .vjs-default-skin .vjs-volume-menu-button:hover:before, 309 | .vjs-default-skin .vjs-volume-menu-button:focus:before, 310 | .vjs-default-skin .vjs-volume-panel:hover:before, 311 | .vjs-default-skin .vjs-volume-panel:focus:before { 312 | background-color: #bb1919; 313 | } 314 | .video-js .vjs-volume-menu-button:before, 315 | .video-js .vjs-volume-panel:before, 316 | .vjs-default-skin .vjs-volume-menu-button:before, 317 | .vjs-default-skin .vjs-volume-panel:before { 318 | width: 44px; 319 | left: 0; 320 | top: 50%; 321 | -webkit-transform: translate(0%, -50%); 322 | -ms-transform: translate(0%, -50%); 323 | transform: translate(0%, -50%); 324 | } 325 | .video-js .vjs-volume-bar, 326 | .video-js .vjs-volume-level, 327 | .vjs-default-skin .vjs-volume-bar, 328 | .vjs-default-skin .vjs-volume-level { 329 | height: 6px; 330 | } 331 | .video-js .vjs-volume-bar, 332 | .vjs-default-skin .vjs-volume-bar { 333 | top: 24%; 334 | margin: 0; 335 | left: 4px; 336 | width: 80px; 337 | } 338 | .video-js .vjs-seek-handle, 339 | .vjs-default-skin .vjs-seek-handle { 340 | height: auto; 341 | } 342 | .video-js .vjs-slider-handle:before, 343 | .video-js .vjs-volume-bar .vjs-volume-handle:before, 344 | .vjs-default-skin .vjs-slider-handle:before, 345 | .vjs-default-skin .vjs-volume-bar .vjs-volume-handle:before { 346 | width: 10px; 347 | height: 16px; 348 | background-color: #FFFFFF; 349 | position: absolute; 350 | right: 0; 351 | top: -5px; 352 | -webkit-transform: none; 353 | -ms-transform: none; 354 | transform: none; 355 | content: ""; 356 | font-family: none; 357 | } 358 | .video-js .vjs-live-controls, 359 | .vjs-default-skin .vjs-live-controls { 360 | display: none; 361 | } 362 | .video-js .vjs-menu-button-inline:hover, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline.vjs-slider-active, 363 | .vjs-default-skin .vjs-menu-button-inline:hover, 364 | .vjs-default-skin .vjs-menu-button-inline:focus, 365 | .vjs-default-skin .vjs-menu-button-inline.vjs-slider-active { 366 | width: 14em; 367 | } 368 | .video-js .vjs-menu-button-inline .vjs-menu, 369 | .vjs-default-skin .vjs-menu-button-inline .vjs-menu { 370 | left: 97px; 371 | } 372 | .video-js .vjs-menu-button-inline .vjs-menu .vjs-menu-content, 373 | .vjs-default-skin .vjs-menu-button-inline .vjs-menu .vjs-menu-content { 374 | position: absolute; 375 | top: 50%; 376 | left: 50%; 377 | -webkit-transform: translate(-50%, -50%); 378 | -ms-transform: translate(-50%, -50%); 379 | transform: translate(-50%, -50%); 380 | overflow: visible; 381 | height: auto; 382 | width: 8em; 383 | } 384 | .video-js.vjs-no-flex .vjs-menu-button-inline, 385 | .vjs-default-skin.vjs-no-flex .vjs-menu-button-inline { 386 | width: 14em; 387 | } 388 | .video-js .vjs-time-tooltip, 389 | .vjs-default-skin .vjs-time-tooltip { 390 | line-height: 10px; 391 | left: 15px; 392 | } 393 | .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, 394 | .vjs-default-skin .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, 395 | .vjs-default-skin .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, 396 | .vjs-default-skin .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal { 397 | top: 24%; 398 | margin: 0; 399 | left: 4px; 400 | width: 80px; 401 | } 402 | .video-js .vjs-volume-panel .vjs-volume-control, 403 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control { 404 | top: 24%; 405 | margin: 0; 406 | left: 4px; 407 | width: 0; 408 | } 409 | .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal, 410 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, 411 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, 412 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal { 413 | top: 24%; 414 | margin: 0; 415 | left: 4px; 416 | width: 80px; 417 | } 418 | .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal, 419 | .vjs-default-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, 420 | .vjs-default-skin .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal, 421 | .vjs-default-skin .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal { 422 | top: 24%; 423 | margin: 0; 424 | left: 4px; 425 | width: 80px; 426 | } 427 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal, 428 | .vjs-default-skin .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { 429 | top: 24%; 430 | margin: 0; 431 | left: 4px; 432 | width: 80px; 433 | } 434 | 435 | /*# sourceMappingURL=videojs-iplayer-theme.css.map */ 436 | -------------------------------------------------------------------------------- /example/css/videojs-iplayer-theme.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../../src/scss/videojs-iplayer-theme.scss"], 5 | "names": [], 6 | "file": "videojs-iplayer-theme.css" 7 | } 8 | -------------------------------------------------------------------------------- /example/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VD39/videojs-iplayer-skin-1/0c03098762c50c02fb4dd945319347ffccb5c99d/example/favicon.ico -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video.JS iPlayer Skin 1 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

HTML 5 Video

18 |
19 | 24 |
25 | 26 | 27 |
28 |

HTML 5 Audio

29 | 33 |
34 | 35 |
36 |

YouTube

37 | 39 |
40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videojs-iplayer-skin-1", 3 | "title": "A Video.JS skin modelled on the new iPlayer theme.", 4 | "url": "", 5 | "author": "Vijay Dubb", 6 | "copyright": "2017", 7 | "version": "1.0.1", 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/VD39/videojs-iplayer-skin-1.git" 12 | }, 13 | "scripts": { 14 | "test": "echo \"Error: no test specified\" && exit 1", 15 | "build": "grunt build", 16 | "dev": "grunt" 17 | }, 18 | "devDependencies": { 19 | "connect-livereload": "~0.2.0", 20 | "grunt": "~0.4.1", 21 | "grunt-contrib-clean": "^1.1.0", 22 | "grunt-contrib-concat": "~0.3.0", 23 | "grunt-contrib-connect": "~0.3.0", 24 | "grunt-contrib-sass": "~0.5.0", 25 | "grunt-contrib-uglify": "~0.2.0", 26 | "grunt-contrib-watch": "~0.4.4", 27 | "grunt-open": "~0.2.0", 28 | "matchdep": "~0.1.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/scss/videojs-iplayer-theme.scss: -------------------------------------------------------------------------------- 1 | $borderColour: #e0e0e0; 2 | $hoverColour: rgb(187, 25, 25); 3 | $bodyColor: #212121; 4 | $controlBackgroundColour: #000000; 5 | $transparentizeColour: #000000; 6 | $volumeHandleBackgoundColour: #FFFFFF; 7 | .video-js, 8 | .vjs-default-skin { 9 | .vjs-loading-spinner { 10 | border-color: $hoverColour; 11 | &:before, 12 | &:after { 13 | border-color: $hoverColour; 14 | } 15 | } 16 | &.vjs-paused { 17 | .vjs-tech, 18 | .vjs-big-play-button { 19 | z-index: 2; 20 | } 21 | .vjs-control-bar { 22 | z-index: -1; 23 | } 24 | } 25 | &.vjs-has-started { 26 | .vjs-tech, 27 | .vjs-big-play-button { 28 | z-index: 0; 29 | } 30 | .vjs-control-bar { 31 | z-index: 2; 32 | } 33 | } 34 | .vjs-menu { 35 | bottom: 14px; 36 | } 37 | .vjs-big-play-button { 38 | background-color: transparentize($transparentizeColour, 0.5); 39 | position: absolute; 40 | margin: 0; 41 | border-radius: 0; 42 | border: none; 43 | width: 85px; 44 | height: 85px; 45 | bottom: 0; 46 | left: 0; 47 | top: auto; 48 | box-shadow: none; 49 | transition: background-color .5s ease; 50 | .vjs-icon-placeholder { 51 | &:hover, 52 | &:focus { 53 | background-color: $hoverColour; 54 | } 55 | &:before { 56 | font-size: 60px; 57 | height: auto; 58 | padding: 0; 59 | margin: 0; 60 | line-height: 85px; 61 | } 62 | } 63 | } 64 | &:hover, 65 | &:focus { 66 | .vjs-big-play-button, 67 | .vjs-big-play-button:focus { 68 | border-color: transparent; 69 | box-shadow: none; 70 | background-color: $hoverColour; 71 | } 72 | } 73 | .vjs-load-progress { 74 | background: $borderColour; 75 | } 76 | .vjs-progress-holder .vjs-play-progress, 77 | .vjs-progress-holder .vjs-load-progress, 78 | .vjs-progress-holder .vjs-load-progress div { 79 | height: 6px; 80 | line-height: 44px; 81 | } 82 | .vjs-volume-level, 83 | .vjs-play-progress { 84 | background-color: $hoverColour; 85 | &:before { 86 | right: -8px; 87 | font-size: 0.9em; 88 | height: 14px; 89 | width: 9px; 90 | background: $volumeHandleBackgoundColour; 91 | padding: 0; 92 | margin: 0; 93 | position: absolute; 94 | top: 50%; 95 | -webkit-transform: translate(-50%, -50%); 96 | -ms-transform: translate(-50%, -50%); 97 | transform: translate(-50%, -50%); 98 | content: ''; 99 | } 100 | } 101 | .vjs-control-bar { 102 | display: -webkit-flex; 103 | display: flex; 104 | -webkit-flex-direction: row; 105 | flex-direction: row; 106 | -webkit-justify-content: flex-end; 107 | justify-content: flex-end; 108 | height: 120px; 109 | background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 1) 100%); 110 | background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(39%, rgba(0, 0, 0, 0.39)), color-stop(39%, rgba(0, 0, 0, 0.39)), color-stop(100%, rgba(0, 0, 0, 1))); 111 | background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 1) 100%); 112 | background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 1) 100%); 113 | background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 1) 100%); 114 | background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 0.39) 39%, rgba(0, 0, 0, 1) 100%); 115 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0); 116 | } 117 | .vjs-icon-placeholder { 118 | &:before { 119 | font-size: 25px; 120 | height: auto; 121 | padding: 0; 122 | margin: 0; 123 | line-height: 44px; 124 | width: 44px; 125 | } 126 | &:focus:before, 127 | &:hover:before { 128 | box-shadow: none; 129 | text-shadow: none; 130 | } 131 | } 132 | .vjs-live-control { 133 | top: -34px; 134 | left: 0; 135 | right: 0; 136 | margin: auto; 137 | position: absolute; 138 | } 139 | .vjs-current-time, 140 | .vjs-remaining-time { 141 | right: 82px; 142 | } 143 | .vjs-duration { 144 | right: 50px; 145 | } 146 | .vjs-time-divider { 147 | right: 75px; 148 | } 149 | .vjs-playback-rate { 150 | .vjs-menu { 151 | width: 44px; 152 | bottom: 14px; 153 | } 154 | .vjs-playback-rate-value { 155 | line-height: 44px; 156 | } 157 | } 158 | .vjs-current-time, 159 | .vjs-duration, 160 | .vjs-time-divider { 161 | position: absolute; 162 | height: 44px; 163 | display: block; 164 | bottom: 0; 165 | >div { 166 | line-height: 44px; 167 | height: 44px; 168 | } 169 | } 170 | .vjs-remaining-time { 171 | display: none; 172 | } 173 | .vjs-control { 174 | width: 44px; 175 | height: 44px; 176 | transition: background-color .5s ease; 177 | bottom: 0; 178 | &.vjs-fullscreen-control, 179 | &.vjs-subs-caps-button, 180 | &.vjs-playback-rate, 181 | &.vjs-captions-button, 182 | &.vjs-chapters-button, 183 | &.vjs-volume-menu-button, 184 | &.vjs-quality-button, 185 | &.vjs-descriptions-button, 186 | &.vjs-audio-button { 187 | width: 44px; 188 | height: 44px; 189 | transition: background-color .5s ease; 190 | bottom: -76px; 191 | position: relative; 192 | } 193 | &:hover, 194 | &:focus { 195 | background-color: $hoverColour; 196 | } 197 | } 198 | .vjs-progress-control { 199 | bottom: 40px; 200 | width: 100%; 201 | position: absolute; 202 | .vjs-slider { 203 | height: 6px; 204 | margin: 0 10px; 205 | } 206 | .vjs-slider-handle { 207 | top: 40%; 208 | } 209 | } 210 | .vjs-progress-control, 211 | .vjs-current-time, 212 | .vjs-duration, 213 | .vjs-time-divider, 214 | .vjs-volume-control, 215 | .vjs-close-button, 216 | .vjs-live-control { 217 | &:hover, 218 | &:focus { 219 | background-color: transparent; 220 | } 221 | } 222 | .vjs-play-control { 223 | position: absolute; 224 | left: 0; 225 | } 226 | .vjs-fullscreen-control { 227 | margin-left: 85px !important; 228 | right: 0; 229 | position: absolute; 230 | } 231 | .vjs-volume-menu-button, 232 | .vjs-volume-panel { 233 | position: absolute; 234 | left: 44px; 235 | &:hover, 236 | &:focus { 237 | background-color: transparent; 238 | &:before { 239 | background-color: $hoverColour; 240 | } 241 | } 242 | &:before { 243 | width: 44px; 244 | left: 0; 245 | top: 50%; 246 | -webkit-transform: translate(-0%, -50%); 247 | -ms-transform: translate(-0%, -50%); 248 | transform: translate(-0%, -50%); 249 | } 250 | } 251 | .vjs-volume-bar, 252 | .vjs-volume-level { 253 | height: 6px; 254 | } 255 | .vjs-volume-bar { 256 | top: 24%; 257 | margin: 0; 258 | left: 4px; 259 | width: 80px; 260 | } 261 | .vjs-seek-handle { 262 | height: auto; 263 | } 264 | .vjs-slider-handle, 265 | .vjs-volume-bar .vjs-volume-handle { 266 | &:before { 267 | width: 10px; 268 | height: 16px; 269 | background-color: $volumeHandleBackgoundColour; 270 | position: absolute; 271 | right: 0; 272 | top: -5px; 273 | -webkit-transform: none; 274 | -ms-transform: none; 275 | transform: none; 276 | content: ""; 277 | font-family: none; 278 | } 279 | } 280 | .vjs-live-controls { 281 | display: none; 282 | } 283 | .vjs-menu-button-inline { 284 | &:hover, 285 | &:focus, 286 | &.vjs-slider-active { 287 | width: 14em; 288 | } 289 | .vjs-menu { 290 | left: 97px; 291 | .vjs-menu-content { 292 | position: absolute; 293 | top: 50%; 294 | left: 50%; 295 | -webkit-transform: translate(-50%, -50%); 296 | -ms-transform: translate(-50%, -50%); 297 | transform: translate(-50%, -50%); 298 | overflow: visible; 299 | height: auto; 300 | width: 8em; 301 | } 302 | } 303 | } 304 | &.vjs-no-flex .vjs-menu-button-inline { 305 | width: 14em; 306 | } 307 | .vjs-time-tooltip { 308 | line-height: 10px; 309 | left: 15px; 310 | } 311 | .vjs-volume-panel { 312 | &:hover .vjs-volume-control.vjs-volume-horizontal, 313 | &:active .vjs-volume-control.vjs-volume-horizontal, 314 | &:focus .vjs-volume-control.vjs-volume-horizontal { 315 | top: 24%; 316 | margin: 0; 317 | left: 4px; 318 | width: 80px; 319 | } 320 | .vjs-volume-control { 321 | top: 24%; 322 | margin: 0; 323 | left: 4px; 324 | width: 0; 325 | &:hover.vjs-volume-horizontal, 326 | &:active.vjs-volume-horizontal, 327 | &:focus.vjs-volume-horizontal { 328 | top: 24%; 329 | margin: 0; 330 | left: 4px; 331 | width: 80px; 332 | } 333 | } 334 | .vjs-mute-control { 335 | &:hover~.vjs-volume-control.vjs-volume-horizontal, 336 | &:active~.vjs-volume-control.vjs-volume-horizontal, 337 | &:focus~.vjs-volume-control.vjs-volume-horizontal { 338 | top: 24%; 339 | margin: 0; 340 | left: 4px; 341 | width: 80px; 342 | } 343 | } 344 | .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { 345 | top: 24%; 346 | margin: 0; 347 | left: 4px; 348 | width: 80px; 349 | } 350 | } 351 | } 352 | --------------------------------------------------------------------------------