From a36b6405f4d3e38d1416ace6db5603a1d8607bea Mon Sep 17 00:00:00 2001 From: Pat O'Neill Date: Fri, 11 Nov 2016 10:29:31 -0500 Subject: [PATCH] Skins guide and icons sandbox example update --- docs/guides/skins.md | 105 ++++++++++++++++++++++--------------- sandbox/icons.html.example | 32 +++++++++++ 2 files changed, 96 insertions(+), 41 deletions(-) diff --git a/docs/guides/skins.md b/docs/guides/skins.md index 2ecdcb47a2..382dd0438d 100644 --- a/docs/guides/skins.md +++ b/docs/guides/skins.md @@ -1,54 +1,77 @@ -Skins -===== - -## Base Skin -The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), -and by default these styles are added to the DOM for you! -That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding -the styles you'd like to change. - -If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = true` before Video.js is loaded. -Keep in mind that without these base styles enabled, you'll need to manually include them. - -Video.js does not currently include the base skin automatically yet, so, this option isn't necessary. - -## Default style elements -Video.js uses a couple of style elements dynamically, specifically, there's a default styles element as well as a player dimensions style element. -They are used to provide extra default flexiblity with styling the player. However, in some cases, like if a user has the HEAD tag managed by React, users do not want this. -When `window.VIDEOJS_NO_DYNAMIC_STYLE` is set to `true`, video.js will *not* include these element in the page. -This means that default dimensions and configured player dimensions will *not* be applied. -For example, the following player will end up having a width and height of 0 when initialized if `window.VIDEOJS_NO_DYNAMIC_STYLE === true`: +# Skins +## Default Skin +When you include the Video.js CSS file (`video-js.min.css`), the default Video.js skin is applied. That means that customizing the look of a Video.js player is a matter of taking advantage of the cascading aspect of CSS to override styles. + +## Additional `