LIVE PREVIEWBUY FOR $15

Options

  • Now help JW Participant 8.x
  • Premium Skins for JW Participant 8: Free, Premium, Enterprise, Adverts
  • Pores and skin for JW Participant 8 that’s the preferred video participant on the net, reside on over 2 million websites
  • Pores and skin with Flat Type
  • Retina Prepared & Totally Responsive
  • Limitless colours – any color you want
  • 8 Totally different Demos
  • HTML5 & CSS3
  • Assist and updates
  • Wishlist Assist
  • SVG recordsdata included and Effectively Documented

Embrace the pores and skin on the web page

<hyperlink rel="stylesheet" sort="textual content/css" href="//yoursite.com/yourstyles/flat.min.css>
<script sort="textual content/javascript" src="./jwplayer/jwplayer.js" ></script>
<script sort="textual content/javascript">jwplayer.key="YOUR_JW_PLAYER_KEY";</script>

and

var videoPlayer = jwplayer('player_example').setup({
    width: 640,
    peak: 360,
    file: "/uploads/instance.mp4",
    picture: "/uploads/instance.jpg",
    pores and skin : {
        controlbar: {
          "icons": "#ffffff",
          "iconsActive": "#1abc9c" 
        },
    }
});

Transfer the timeslider in-line with different controls

videoPlayer.on('prepared', perform() {
    // Transfer the timeslider in-line with different controls
    const playerContainer = videoPlayer.getContainer();
    const buttonContainer = playerContainer.querySelector('.jw-button-container');
    const spacer = buttonContainer.querySelector('.jw-spacer');
    const timeSlider = playerContainer.querySelector('.jw-slider-time');
    buttonContainer.replaceChild(timeSlider, spacer);
});

preview

Setting Customized Colours

  • pores and skin.controlbar.textual content
    • The colour of any plain textual content within the management bar, such because the time.
  • pores and skin.controlbar.icons
    • The default, inactive colour of all icons within the management bar. This feature additionally controls the colour of the play, pause, and replay icons within the inactive and full states.
  • pores and skin.controlbar.iconsActive
    • The colour of hovered or chosen icons within the management bar.
  • pores and skin.controlbar.background
    • The background colour of the management bar and the quantity slider. The default background is clear.
  • pores and skin.timeslider.progress
    • The colour of the bar within the time slider stuffed in from the start of the video by means of the present place. The buffer area of the management bar is 50% of the opacity of this colour. The colour of the quantity slider can also be managed by this selection.
  • pores and skin.timeslider.rail
    • The colour of the bottom of the timeslider, often called the rail.
  • pores and skin.menus.textual content
    • The colour of inactive, default textual content in menus and the Subsequent Up overlay.
  • pores and skin.menus.textActive
    • The colour of hovered or chosen textual content in menus. This feature additionally controls the textual content colour within the Uncover overlay and the hover state textual content colour within the Subsequent Up overlay.
  • pores and skin.menus.background
    • The background colour of menus and the Subsequent Up overlay.
  • pores and skin.tooltips.textual content
    • The textual content colour of tooltips.
  • pores and skin.tooltips.background
    • The background colour of tooltips.

Reference in Documentation

  • JW Participant 8 help
  • Study extra about Utilizing JW Participant Skins
  • Study extra about CSS Skinning Information
  • Study extra about Constructing JW Participant Skins
  • Study extra about Pores and skin CSS Lessons Reference
  • Study extra about Pattern CSS File
  • Icons font generator utilizing SVG recordsdata
  • PX to EM conversion made easy
  • On-line CSS Minifier/Compressor
  • JW Participant Innovation: Analysis, Roadmap, Experiments
  • JW Participant Supply Code
  • Find out how to construct JW Participant from supply
  • Crossdomain File Loading

Changelog

  • Flat Pores and skin Retina for JWPlayer 8.13.8 – 09 Might 2020.
  • Flat Pores and skin Retina for JWPlayer 8.12.4 – 02 February 2020.
  • Flat Pores and skin Retina for JWPlayer 8.3.0 – 06 Might 2018.
  • Assist JW 7.9.3 and timeSliderAbove – 24 February 2017.
  • Assist JW 7.7.1 and Icons by Base64 – 14 October 2016.
  • Assist add model brand on management bar – 02 Might 2016.
  • Launch: The launch of the Flat Pores and skin Retina for JW7 venture – 02 September 2015.

Different Skins

preview
preview
preview


Source