Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

How to resolve CSS conflicts if two players in same page with one default skin and customized skin

Hi, I need to place two players in my webpage as per my requirement. One is for Audio and other is for video. I have fully customized the skin for audio player using the skin file. But, it is reflecting in the video player and styles got disturbed. Here is my code.

Audio player:

<link rel="stylesheet" type="text/css" href="http://projectname/music_bar/skins/myskin.css" />

skin: {
url: "http://projectname/music_bar/skins/myskin.css",
name: "myskin"
height: 45,
width: "auto",
playlist: myplaylist.rss,


Video Player:

<link rel="stylesheet" type="text/css" href="http://projectname/music_bar/skins/stormtrooper.css" />

jwplayer('player_{{ }}').setup({
width: '100%',
height: '255',
primary: "flash",
skin: {
url: "http://projectname/music_bar/skins/stormtrooper.css",
name: "Stormtrooper"
playlist: [{
sources: [{ file: media_url }] }

Help me setting up two different skins without conflicts. Thank You

1 Community Answers


JW Player Support Agent  
0 rated :

Easiest way is to use iFrames to isolate each player

This question has received the maximum number of answers.