web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-24 08:42:25 +02:00
Code Releases Activity

@mmcc added the vjs-big-play-centered class. closes #2293

Browse Source
This commit is contained in:
Matthew McClure 2015-07-06 17:10:50 -07:00 committed by heff
parent 99032bb2a7
commit b77e3c9ade
5 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -52,6 +52,7 @@ CHANGELOG
* @mmcc un-hid the current and remaining times by default ([view](https://github.com/videojs/video.js/pull/2241))
* @pavelhoral fixed a bug with user activity that caused the control bar to flicker ([view](https://github.com/videojs/video.js/pull/2299))
* @dmlap updated to videojs-swf@4.7.1 to fix a video dimensions issue on subsequent loads ([view](https://github.com/videojs/video.js/pull/2281))
* @mmcc added the vjs-big-play-centered class ([view](https://github.com/videojs/video.js/pull/2293))
--------------------

8
src/css/_variables.scss
View File

@ -7,5 +7,9 @@ $secondary-bg: lighten($primary-bg, 35%);
$text-font-family: Arial, Helvetica, sans-serif;
$base-font-size: 10px;
$control-bar-bg: #2B333F;
$control-bar-transparency: 0.5;
$control-bar--bg: #2B333F;
$control-bar--transparency: 0.5;
$big-play-button--width: 3em;
$big-play-button--height: 1.5em;
$big-play-button--transparency: 0.8;

22
src/css/components/_big-play.scss
View File

@ -1,8 +1,8 @@
.video-js .vjs-big-play-button {
font-size: 3em;
line-height: 1.5em;
height: 1.5em;
width: 3em; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding.
line-height: $big-play-button--height;
height: $big-play-button--height;
width: $big-play-button--width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding.
display: block;
z-index: 2;
position: absolute;
@ -13,8 +13,8 @@
opacity: 1;
border: 2px solid $primary-text;
/* Need a slightly gray bg so it can be seen on black backgrounds *///
@include background-color-with-alpha($primary-bg, 0.8);
/* Need a slightly gray bg so it can be seen on black backgrounds */
@include background-color-with-alpha($primary-bg, $big-play-button--transparency);
@include border-radius(0.3em);
@include transition(all 0.4s);
@ -23,11 +23,19 @@
// Since the big play button doesn't inherit from vjs-control, we need to specify a bit more than
// other buttons for the icon.
&:before {
@extend %icon-default
@extend %icon-default;
}
}
/* Hide if controls are disabled, the video is playing, or native controls are used. */
// Allow people that hate their poster image to center the big play button.
.video-js.vjs-big-play-centered .vjs-big-play-button {
top: 50%;
left: 50%;
margin-top: -($big-play-button--height / 2);
margin-left: -($big-play-button--width / 2);
}
// Hide if controls are disabled, the video is playing, or native controls are used.
.video-js.vjs-controls-disabled .vjs-big-play-button,
.video-js.vjs-has-started .vjs-big-play-button,
.video-js.vjs-using-native-controls .vjs-big-play-button {

2
src/css/components/_control-bar.scss
View File

@ -7,7 +7,7 @@
right: 0;
height: 3.0em;
@include background-color-with-alpha($control-bar-bg, $control-bar-transparency);
@include background-color-with-alpha($control-bar--bg, $control-bar--transparency);
}
// Video has started playing

2
src/css/components/_menu.scss
View File

@ -10,7 +10,7 @@
width: 0em;
height: 0em;
margin-bottom: 1.5em;
border-top-color: rgba(7, 40, 50, $control-bar-transparency); /* Same as ul background */
border-top-color: rgba(7, 40, 50, $control-bar--transparency); /* Same as ul background */
}
/* Button Pop-up Menu */