With some help from LongTail Video Support (thank you!) I found a solution.

It turns out that sometimes the config attributes for the playlist are not carried over. So, you can force them in your [jwplayer] shortcode attributes.

Here’s some sample code to show you what I’m talking about.

Original:

[jwplayer playlistid="123"]

Updated:

[jwplayer playlistid="123" playlist.position="bottom" playlist.size="250"]

The key attributes being “playlist.position” and “playlist.size” I hope this helps!

You can resolve this by uploading your files to a live production server, but that is a pain, especially if you’re still in development.

There’s a very simple solution:

1. Close Chrome completely
2. Launch Chrome from Terminal with the “–allow-file-access-from-files” argument

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

This will allow that session of Chrome to access local files. Note: Once you close and reopen the application you’ll no longer have access to local files again.

A simple example of the :hover pseudo class in action is when you mouse over a Hyperlink and it changes color, or it becomes underlined or something dazzling like that. A more advanced example is applying :hover to other tags such as a <td> to make the data cell of a table change color, this is the example I’m going to talk about today.

To get this working in IE6 I have gone through a large amount of resources with javascript fixes, that work—but can be overly complicated. I have also attempted to use some .htc behavior fixes, which can be incredibly finicky and are also invalid CSS according to W3 standards.

But don’t worry! There is hope! Finally after wrestling with this issue for a long time and doing some good investigating for a decent fix, I found it through the use of jQuery.

The Script:

<script src="/include/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
        $('#my-calendar td').hover(function(){
               $(this).addClass('over');
        }, function() {
               $(this).removeClass('over');
        });
});
</script>

The CSS:

.over {background-color: #ffff00;}

The HTML:

<table id="my-calendar">
    <tr>
        <td>hover over me!</td>
    </tr>
</table>

Basically—similar to some JavaScript examples you may have seen jQuery uses a mouseover (hover) and adds the “over” class to your <td>. Likewise—when you mouse out it simply removes the class. It’s that simple and it actually works!

View the Example
Download JQuery