I am really stumped on this one. Probably largely because I am not very experienced with Javascript and jquery, but still...

I have set up a js script that dynamically sizes all elements on the page. I've isolated the code in question here where the width of the video player and the containing div for the video with id "product video" are defined:

var imageWidth = $(".window").width();
var videoSlideBoxWidth = (imageWidth - 312) * 0.75;
$("#slideVideo").css({'width' : videoSlideBoxWidth});
$('#productvideo').attr({width : videoSlideBoxWidth});

What returns is very very strange. The #slideVideo div is sized correctly at a width of 1075.5 at screen resolution of 1920x1280. The video however (I deleted the size attributes on the videojs.tpl.php file in favor of a js solution, returns a width of 4294967062 which breaks the player. Does anyone know what the best way to pass video.js dynamic size variables defined in jquery? This is the last element towards completing my project and I'm pulling my hair out.

Many thanks,


SuperRookie’s picture

I've played around with adding:


to the top of the js file above the document.ready function. It prevents that 4294967062 from showing up in the width, but rather sends nothing at all to the width attribute of the #productvideo element. Does this mean anything to anyone? Is it a javascript conflict that is causing this problem?


Jorrit’s picture

If you have multiple jQuery instances on one page, $.noConflict() may have an effect.

Could you give the HTML snippet that shows what #productvideo and #slideVideo are? Also take into account that Video.js changes the HTML when it loads, take a look at the generated HTML to determine what elements are there.

SuperRookie’s picture

#productvideo is the id of the containing video div that controls the player size. I forceably renamed it in the video-js.tpl.php file. #slidevideo is the div that contains the #productvideo div, which slides on and off screen. My problem seems to be that no matter what I do, the video.js containing folder (class .videojs vjs-default-skin) will not respond to js based attributes.

Jorrit’s picture

Status:Active» Closed (won't fix)

Sorry that I didn't respond. I don't think this is an issue with the Video.js module, but with the Video.js player. I suggest you ask for support at http://www.videojs.com/.