In my asp.net web application, I have a media player object that displays differently in Chrome, Firefox (as VLC player) and IE (as Windows Media Player). This results in varying width of the embedded audio player object. How can I adjust the width of the media player for different browsers using CSS?
Below is the Audio Player Code:
<div CssClass="media_player">
<object name="MMPlayer1" id="MMPlayer1" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
height="68" width="680" standby="Loading Media Player components..." type="application/x-oleobject"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsm p2inf.cab#Version=6,4,7,1112">
<param name="fileName" value="ding.wav">
<param name="autoStart" value="false">
<param name="showControls" value="true">
<param name="AllowChangeDisplaySize" value="false">
<param name="ClickToPlay" value="true">
<param name="ShowDisplay" value="0">
<param name="ShowDisplay" value="false">
<param name="ShowStatusBar" value="1" />
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src="http://localhost:50451/ding.wav" autostart="false" width="680" height="68">
</embed>
</object>
</div>
CSS:
.media_player
{
margin-left:0;
margin-top:0;
width:680px;
height:70px;
background-color:White;
}