Position of elements changes after JWplayer loads

Question

I have a video loaded in jwplayer and a small video queue with thumbnails positioned right alongside it. For some reason, when my player loads, it pushes the entire queue down below the player, despite it being right next to it otherwise. It is behaving as if the container is too small, but if I make the videoWrapper larger I get the same behavior.

HTML:

<div id="videoWrapper">
    <div id="video"></div>  

    <script type='text/javascript'>
            jwplayer('video').setup({
                    file: <?php echo '\''.$sex.'\''?>,
                    width: '750',
                    height: '420',
                    primary: 'flash',
                    autostart: 'false'
            });
    </script>

    <div id="queueList">
        Up Next
        <input type="image" src=<?php echo $thumbs[0]; ?> class="thumb" />
        <input type="image" src=<?php echo $thumbs[1]; ?> class="thumb" />
        <input type="image" src=<?php echo $thumbs[2]; ?> class="thumb" />
        <input type="image" src=<?php echo $thumbs[3]; ?> class="thumb" />
    </div>
</div>

CSS:

#videoWrapper{
    display:block;
    width:872px;
    height:420px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
}#queueList{
    width:120px;
    height:420px;
    float:right;
}.thumb{
    margin-top:7px;
    width:120px;
    height:auto;
    background:black;
}#video{
    width:750px;
    height:420px;
    background:black;
    color:purple;
    float:left;
}

If anyone can provide any sort of reason why this is happening or a work around I would very much appreciate it.

A live look at what I am talking about can be seen here: http://porndoraone.com/test2.php The orange boxes should be inside the black border, adjacent to the video.

Answer 1

Solution seems to be very simple. All what you have to do is style #video_wrapper, created by jwplayer, like this:

#video_wrapper {
    float: left;
}

See this JSFiddle with working demo.