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
