Tube Skin Retina for VideoJS

Tube Skin Retina for VideoJS Created by FaceTheme. This templates have specific characteristics, namely: The base Video.js skin is made using HTML and CSS. 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 .

You can use this Tube Skin Retina for VideoJS on Skins category for blue, carrot, flat skin, green, orange, player, purple, red, retina, teal, unlimited colors, videoJS, VideoJS 5, violet, yellow and another uses.

Tube Skin Retina for VideoJS
© Copyright by FaceTheme

Main Features:

  • Video preview resolution: None
  • Software version: None
  • High resolution: Yes
  • Compatible browsers: IE6, IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Files included: JavaScript JS, HTML, CSS

Features

  • Video.js that is open source HTML5 & Flash video player, as well as YouTube and Vimeo (through plugins), used on over 200,000 websites
  • Skin with Tube Style
  • Retina Ready & Fully Responsive
  • HTML5 & CSS3
  • Support videojs-logo / videojs-watermark
  • Support keyboard shortcuts:
  • – Up/down arrow or mouse wheel -> control volume
    – Right/left arrow -> seek player by 5s
    – M -> toggle mute
    – F or double click -> toggle fullscreen
    – F or Esc -> exits full-screen mode
    – 0 -> restart video
    – 1-9 -> skip to a particular section of the video (e.g., 0 is 0%, 9 is 90% and 5 goes to the video midpoint)

  • Support and updates
  • Wishlist Support
  • Well Documented

Include the skin on the page

The base Video.js skin is made using HTML and CSS. 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.

<link rel='stylesheet' type='text/css' href='./video-js-5.10.4/video-js.min.css></link><link rel='stylesheet' type='text/css' href='./video-js/videojs-tube.min.css></link><script type='text/javascript' src='./video-js/video.js' ></script>

The main class name for all skin-specific styles. To make your own skin,replace all occurrences of ‘vjs-default-skin’ with a new name. Then add your newskin name to your video tag instead of the default skin.

<video class='video-js vjs-big-play-centered'>

Reference

  • VideoJS Player Homepage
  • VideoJS Player Documentation
  • Learn more about CSS Skinning Guide
  • Learn more about Building VideoJS Skins
  • Create Custom VideoJS Player
  • Icons font generator using SVG files
  • PX to EM conversion made simple
  • Online CSS Minifier/Compressor
  • VideoJS Source Code
  • How to build VideoJS from source

Changelog

  • Launch: The launch of the Tube Skin Retina for VideoJS 5 project – 01 June 2016.

Other Skins

  • Skin for VideoJS 5: Flat, Tube
  • Skin for VideoJS 4: Flat
  • Skins for JW7: Flat, Long Shadow, AIR, Thin Skins
  • Skins for JW6: vSkin, Mockup free, Long Shadow, Gloss, AIR Skins