diff --git a/docs/setup.md b/docs/setup.md
index 4c6d20e3d5..979740a867 100644
--- a/docs/setup.md
+++ b/docs/setup.md
@@ -60,6 +60,16 @@ Otherwise include/exclude attributes, settings, sources, and tracks exactly as y
```
+By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional `vjs-big-play-centered` class to your video element. For example:
+
+```html
+
+```
Alternative Setup for Dynamically Loaded HTML
---------------------------------------------
diff --git a/docs/skins.md b/docs/skins.md
index c64fcfbea4..c732f223c8 100644
--- a/docs/skins.md
+++ b/docs/skins.md
@@ -3,9 +3,15 @@ Skins
The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin.
+## Icons
+
New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font.
-The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
+All of the icons are available as variables in the [LESS](https://github.com/videojs/video.js/blob/master/src/css/video-js.less#L87-L99) source, making it easy to replace icons (such as the loading spinner). The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
+
+
+
+## Customization
When you create a new skin, you can either override styles in the default skin:
@@ -20,4 +26,3 @@ Or remove the 'vjs-default-skin' class from the video tag and create a new skin
```
More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins).
-
diff --git a/src/css/font/vjs.eot b/src/css/font/vjs.eot
index 1b8202af8b..a075c19f0b 100644
Binary files a/src/css/font/vjs.eot and b/src/css/font/vjs.eot differ
diff --git a/src/css/font/vjs.svg b/src/css/font/vjs.svg
index 2059a1f2ea..f1af0e53b5 100644
--- a/src/css/font/vjs.svg
+++ b/src/css/font/vjs.svg
@@ -9,32 +9,57 @@ This is a custom SVG font generated by IcoMoon.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/css/font/vjs.ttf b/src/css/font/vjs.ttf
index a5ad4685e9..eb24637918 100644
Binary files a/src/css/font/vjs.ttf and b/src/css/font/vjs.ttf differ
diff --git a/src/css/font/vjs.woff b/src/css/font/vjs.woff
index 375510e044..c3f0f1d807 100644
Binary files a/src/css/font/vjs.woff and b/src/css/font/vjs.woff differ
diff --git a/src/css/video-js.font.dev.svg b/src/css/video-js.font.dev.svg
index c639bc93c8..496cf6d102 100644
--- a/src/css/video-js.font.dev.svg
+++ b/src/css/video-js.font.dev.svg
@@ -9,32 +9,57 @@ This is a custom SVG font generated by IcoMoon.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/css/video-js.less b/src/css/video-js.less
index 0a2b3330d3..889737dfb3 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -95,8 +95,12 @@ The control icons are from a custom font. Each icon corresponds to a character
@fullscreen-exit-icon: "\e00b";
@square-icon: "\e009";
@spinner-icon: "\e00a";
+@spinner2-icon: "\e00d";
+@spinner3-icon: "\e01e";
+@spinner4-icon: "\e01f";
@subtitles-icon: "\e00c";
@captions-icon: "\e008";
+@share-icon: "\e00e";
/* Base UI Component Classes
--------------------------------------------------------------------------------
@@ -460,6 +464,15 @@ easily in the skin designer. http://designer.videojs.com/
.transition(all 0.4s);
}
+/* Optionally center */
+.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
+ @total-width: @big-play-width + (@big-play-border-width * 2);
+ @total-height: @big-play-height + (@big-play-border-width * 2);
+
+ .absolute-align(center, @big-play-margin, @total-width);
+ .absolute-align(middle, @big-play-margin, @total-height);
+}
+
/* Hide if controls are disabled */
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
display: none;
@@ -510,7 +523,7 @@ easily in the skin designer. http://designer.videojs.com/
top: 50%;
left: 50%;
- font-size: 5em;
+ font-size: 4em;
line-height: 1;
width: 1em;
@@ -525,7 +538,7 @@ easily in the skin designer. http://designer.videojs.com/
}
.vjs-default-skin .vjs-loading-spinner:before {
- content: @spinner-icon;
+ content: @spinner2-icon;
font-family: VideoJS;
position: absolute;