Forgive me if this has been covered before... I've not been able to find a post where someone has had the same problem.
I have successfully installed the jw player in conjunction with sfwobject 2 and managed to create an xml playlist. Code looks like this:
<script type="text/javascript">
var flashvars = {};
flashvars.file = "http://www.neilobrien.co.uk/test2/videos/neilplaylist.xml";
flashvars.autostart = "true";
flashvars.playlist = "right";
flashvars.playlistsize = "400";
flashvars.skin = "http://www.neilobrien.co.uk/test2/testvideo/snel.swf";
var params = {};
params.loop = "false";
params.allowscriptaccess = "always";
var attributes = {};
swfobject.embedSWF("../testvideo/player.swf", "discovidbox", "730", "280", "9.0.0", false, flashvars, params, attributes);
</script>Further down in my html, the discovidbox div looks like this:
<div id="discovidbox">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="../images/indexpics/picflash2.jpg" height="200" width="220" alt="Get Adobe Flash player"/>
</a>My problem is caused by the playlist. In FF and IE8, the playlist displays on the right, but doesn't take any instructions from CSS. In IE 7, the playlist shows twice. This time the same playlist shows to the right, fully functional but doesn't follow CSS rules. The second one is underneath, but follows the CSS rules perfectly.
The following links probably illustrate better:
http://www.neilobrien.co.uk/test2/vidmedia/exhibita.jpg
http://www.neilobrien.co.uk/test2/vidmedia/exhibitb.jpg
I'm sure it's something staring me in the face... I just can't work it out. Can anyone point me in the right direction?
Many thanks
The playlist can't be styled or positioned with CSS. The playlist is part of one unit of Flash content, the JW FLV Player, which also can't be styled or positioned with CSS.
When swfobject writes the object element to embed the Flash content, the entire HTML element with an id of "discovidbox" will be replaced with the object element that swfobject generates.
This will all disappear!
<div id="discovidbox"><a href="http://www.adobe.com/go/getflashplayer"><img src="../images/indexpics/picflash2.jpg" height="200" width="220" alt="Get Adobe Flash player"/></a></div>Therefore, it's common practice to use a "wrapper" element and target the "wrapper"element with CSS.
<div id="discovidboxcontainer"><div id="discovidbox"><a href="http://www.adobe.com/go/getflashplayer"><img src="../images/indexpics/picflash2.jpg" height="200" width="220" alt="Get Adobe Flash player"/></a></div></div>Then your CSS should target the division element with an id of "discovidboxcontainer".