JWPlayer, DIV, jQuery

Question

I'm trying to make a DIV behind JW Player (newest 5.7 version) fade in a solid color through the use of jQuery upon clicking the Start button on JW Player. When the Stop button is hit on JW Player (or pause), the DIV behind JW Player with the solid color will fade out through the use of jQuery.

Any suggestions on how to do this with maybe even a simpler way?

Answer 1

You can use the events and do something likes this

<div id="wrapper" style="width:400px; padding:30px;">
        <div id="media"></div>
        <script type="text/javascript">
            jwplayer('media').setup({
                'id': 'playerID',
                'width': '400',
                'height': '300',
                'autostart':'false',
                'file': './bunny.mp4',
                'image': './bunny.jpg',
                'modes': [
                    {type: 'html5'},
                    {type: 'flash', src: './player.swf'}
                ]
            });
            jwplayer('media').onPlay(
                function(event) {
                    document.getElementById('wrapper').style.background = 'orange';
                }
            );
            jwplayer('media').onPause(
                function(event) {
                    document.getElementById('wrapper').style.background = 'yellow';
                }
            );
        </script>
</div>