Search code examples
jwplayerjwplayer7

JW Player 7 Controllbar styling issue - how do I get rid of the border?

I am trying to customize the controlbar background. I need to get a transparent background for the controllbar

I am using "seven" theme. This is my setup for the theme.

jwplayer("container").setup({                
                    "width": 848,
                    "height": 477,
                    "type": "mp4",
                    "autostart": auto,
                    "provider": "video",                    
                    "file": VIDEO_PATH,
                    "image": THMB_PATH,
                    "skin": { name: "seven", active: "#ff2b2b", inactive: "#fff", background: "rgba(0,0,0,.5)" },
                    "events": { "onReady": function () { vv.setPlayerStatus("Ready"); } },
                    "modes": [
                      { "type": "html5" },
                      { "type": "flash", src: "/content/js/webcam/new/jwplayer.flash.swf" },
                      { "type": "download" }
                    ]                    
                });

As you can see I am using background: "rgba(0,0,0,.5)" as background.

"skin": { name: "seven", active: "#ff2b2b", inactive: "#fff", background: "rgba(0,0,0,.5)" }

This works but I see a darker border on top and bottom of the horizontal slider as shown in this image (see red arrows)

enter image description here

If I make it 100% transparent then the border goes away. But the problem is any video with white BG make the controllbar invisible. So I want 50% transparency.

I tried various options from JW Player skin reference but nothing helped.

Any idea how to achieve this?

Solution

  • You need to target the time slider component specifically and make it transparent. This will then allow the 50% transparency applied to the parent control bar to take affect.

    Also, because the JW styles are added dynamically, they will appear after your styles - later in the style cascade - and so in order for your declaration to be honoured you'll need to include the "!important" flag: 

    .jw-skin-seven .jw-slider-time{ background:transparent!important;}