Vimeo API and progress bar issue

Question

I'm using the vimeo froogaloop API to control the videos from external buttons (It's a style thing.)

Here's a jsfiddle of progress so far: http://jsfiddle.net/andrewminton/H8ynJ/

What I'm trying to do is listen to the api for the playProgress event so that I can alter the css width in percentage of my .playhead div.

function onPlayProgress() {

                            froogaloop.addEvent('playProgress', function(data) {

                                var Playhead = (data.percent)*100;
                                var playheadBar = container.querySelector('div .progress .playhead');
                                playheadBar.css('width', Playhead+'%');

                        });
                    }

Any ideas why my playbar css width percentage isn't updating?

Answer 1

It's cool, I figured I'd add my own function an listen for the data.percent value.

I was thinking jquery syntax and not pure js:

function Progress(message){
                    playbar.style.width = message+'%';
                }

style.width was the key here.