diff options
Diffstat (limited to 'javascript/videojs/docs/legacy-docs/guides/skins.html')
| -rw-r--r-- | javascript/videojs/docs/legacy-docs/guides/skins.html | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/javascript/videojs/docs/legacy-docs/guides/skins.html b/javascript/videojs/docs/legacy-docs/guides/skins.html new file mode 100644 index 0000000..d6a32d8 --- /dev/null +++ b/javascript/videojs/docs/legacy-docs/guides/skins.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<title></title> +<link rel="stylesheet" type="text/css" href="../css/guides.css"> +<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,600,600italic' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/solarized_light.min.css" /> +<script type="text/javascript" src="//use.edgefonts.net/source-code-pro.js"></script> +<link rel="canonical" href="https://docs.videojs.com/tutorial-skins.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-skins.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="skins">Skins</h1> +<h2 id="base-skin">Base Skin</h2> +<p>The base Video.js skin is made using HTML and CSS (although we use the <a href="http://sass-lang.com">Sass preprocessor</a>), +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.</p> +<p>If you don't want Video.js to inject the base styles for you, you can disable it by setting <code>window.VIDEOJS_NO_BASE_THEME = true</code> before Video.js is loaded. +Keep in mind that without these base styles enabled, you'll need to manually include them.</p> +<p>Video.js does not currently include the base skin automatically yet, so, this option isn't necessary.</p> +<h2 id="default-style-elements">Default style elements</h2> +<p>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 <code>window.VIDEOJS_NO_DYNAMIC_STYLE</code> is set to <code>true</code>, video.js will <em>not</em> include these element in the page. +This means that default dimensions and configured player dimensions will <em>not</em> be applied. +For example, the following player will end up having a width and height of 0 when initialized if <code>window.VIDEOJS_NO_DYNAMIC_STYLE === true</code>:</p> +<pre><code class="lang-html"><video width="600" height="300"></video> +</code></pre> +<h3 id="-player-width-and-player-height-"><code>Player#width</code> and <code>Player#height</code></h3> +<p>When <code>VIDEOJS_NO_DYNAMIC_STYLE</code> is set, <code>Player#width</code> and <code>Player#height</code> will apply any width and height +that is set directly to the video element (or whatever element the current tech uses).</p> +<h2 id="icons">Icons</h2> +<p>You can view all of the icons available in the base theme by renaming and viewing +<a href="https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example"><code>icons.html.example</code></a> in the sandbox directory.</p> +<h2 id="customization">Customization</h2> +<p>When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. +You should include a new class matching the name of your theme, then just start overriding!</p> +<pre><code class="lang-css">.vjs-skin-hotdog-stand { color: #FF0000; } +.vjs-skin-hotdog-stand .vjs-control-bar { background: #FFFF00; } +.vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; } +</code></pre> +<p>This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), +but you can skin any other aspect. +Our suggestion is to use a browser such as Firefox and Chrome, +and use the developer tools to inspect the different elements and see what you'd like to change and what classes +to target when you do so.</p> +<p>More custom skins will be available for download soon. +If you have one you like you can share it by forking <a href="http://codepen.io/heff/pen/EarCt">this example on CodePen.io</a>, +and adding a link on the <a href="https://github.com/videojs/video.js/wiki/Skins">Skins wiki page</a>.</p> + +<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script> +<script src="../js/guides.js"></script> +<script>hljs.initHighlightingOnLoad();</script> +</body> + +</html> |