CODEWITHSUNDEEP
jwplayerjwplayer7
kheya
kheya

Reputation: 7612

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?

Upvotes: 1

Views: 684

Answers (2)

jherrieven
jherrieven

Reputation: 425

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;}

Upvotes: 2

zer00ne
zer00ne

Reputation: 43880

Try:

CSS

.jw-skin-seven .jw-slider-horizontal,
.jw-skin-seven .jw-slider-container, 
.jw-skin-seven .jw-rail { 
    border: 0 none rgba(0,0,0,.5); 
    background-color: rgba(0,0,0,.5); 
    outline: 0 none rgba(0,0,0,0);
}

If that doesn't work use !important 

.jw-skin-seven .jw-slider-horizontal,
.jw-skin-seven .jw-slider-container, 
.jw-skin-seven .jw-rail { 
    border: 0 none rgba(0,0,0,.5) !important; 
    background-color: rgba(0,0,0,.5) !important; 
    outline: 0 none rgba(0,0,0,0) !important;
}

If that doesn't work try

.jw-skin-seven .jw-slider-horizontal.jw-slider-horizontal,
.jw-skin-seven .jw-slider-container.jw-slider-container, 
.jw-skin-seven .jw-rail.jw-rail { 
    border: 0 none rgba(0,0,0,.5) !important; 
    background-color: rgba(0,0,0,.5) !important; 
    outline: 0 none rgba(0,0,0,0) !important;
}

Declaring a class twice actually works, I forgot how I found this out, and it's not documented or I can't find the key terms to invoke the right search.

Upvotes: 1

Related Questions