![](https://secure.gravatar.com/avatar/7e4b7c3fceaaff24472fd162f41c431f?rating=PG&size=50&default=https%3A%2F%2Fcdn.desk.com%2Fassets%2Funknown_user_50-8ad5644bbe6b1bd7454f2ea465f782bd.png)
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" />
jwplayer("myElement").setup({
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_{{ wallpost.id }}').setup({
width: '100%',
height: '255',
primary: "flash",
skin: {
url: "http://projectname/music_bar/skins/stormtrooper.css",
name: "Stormtrooper"
},
stretching:"exactfit",
playlist: [{
sources: [{ file: media_url }] }
]
});
Help me setting up two different skins without conflicts. Thank You