Wordpress Plugin & Playlist FF & IE issues - compromised by WP Theme?
I raised my problem regarding the display of playlists in FF and older versions of IE in a previous question now closed:
http://support.jwplayer.com/customer/en/portal/questions/6480002-wp-plugin-rendering-playlists-1-in-safari-safari-mobile-and-chrome-but-not-ie-ff?new=6480002
Thanks to Ethan, I have now followed his suggestion and set up tests in a site that uses a different theme and here the JW Player works just fine across Safari, Chrome, Firefox and IE browsers.
1) For the site using Themetrust's 'Reveal' theme using a JW playlist within the content area – see http://www.filmindustrytalent.com – this works fine in webkit browsers – Safari and Chrome – but doesn't appear at all in Firefox and only plays in recent versions of IE. In older versions of IE, the player is constrained to a small box. The JW Player for this playlist is set to Responsive 16:9 and to try HTML5 first and then to fallback to a Flash wrapper and I expect this is where the height and width issues arise.
2) On a site using the standard Wordpress 2011 theme, I have set up a test page using content from the other site and using two players – the first set to HTML5 and the second set to try Flash first. This page seems to work fine, showing both players properly in Chrome, Safari, Firefox and even older versions of IE. See http://www.connectworks.co.uk/test-jw-video/.
On the Themetrust support pages, while they don't have a solution for this particular problem, they do discuss a css solution for issues with the wpaudioplayer which was working fine for a user in Safari and Chrome, but was not showing in Firefox and had extra space above an below in iE where it was presumably defaulting to a Flash version of the wpaudioplayer. Themetrust's analysis was that it needed to have a specified height and that the absence of a height was making it default to 290px top and bottom margins in IE and perhaps preventing display at all in Firefox.
The recommended fix which is claimed to have worked in this case – http://digone.com/look-a-cannes-lion/ – was to add the following css rule to the Custom CSS that the 'Reveal' theme adds to the html page on load:
.audioplayer_container object { height: 30px; }
Might there be a similar css rule that we could use on http://www.filmindustrytalent.com to target the height of the JW Player object in Firefox and earlier versions of IE than version 10 where I assume the issue relates to the translation to using Flash which may need a height specification in CSS if it's to work within the Reveal theme?
As a secondary issue, I seem to be finding that I've needed to make a particular adjustment to the height of the Listbar in the player management settings when it's set to display at the bottom. Although each list item seems only to take 90 pixels, the height needs to be set at least one pixel more to prevent Firefox stealing territory from the player viewing window. So set to 90 per video in the stack, it will work fine in Safari, Chrome and modern IE, but you only see the top half of the video window in Firefox and when set to 91px per video, the viewing window is clear in all browsers I've texted and there is only a small and unpredictable lower lip below the list. It's not an uncomfortable area of padding and entirely acceptable if it's allowing the Listplayer system to work cross browser.
Do let me know if you can think of the CSS rule that might address height and/or width for the JW Player and allow it to behave in Firefox and older versions of IE. While HTML5 will be the way forward, this is still far too significant a proportion of the market for my client to ignore,.
Many thanks, Simon.
