Question

I’ve got an edge to edge video that resizes to the browser dynamically, would like to center it on the page now. Because the video’s size varies, I need to do this with JavaScript.

You lovely folks helped me with correct syntax which was a major issue I had, but I’m still not seeing the results I’m looking for.

The theory is that the function measures the browser viewports width and height and the video’s width and height, subtracts the video from the browser, then divides that by two and applies it as left and top values in CSS. The video is set to position:absolute is in a div that’s set to position:fixed.

UPDATE:

With @Guffa’s advice in mind, I defined the video as a variable and applied the styles to it directly. The code is sound and shows no errors, but I’m not seeing the result. Honestly.. Been trying at this for a few days and can’t figure it out.

UPDATE:

Tested the code by commenting out lines 4 and 5 below and adding in vid.style.left = (500) + "px"; and that WORKED.. also tested with vid.style.left = (windowWidth) + "px"; and that WORKED… which means the code is failing at parseInt(vid.style.width,10). The logic of that line is to calculate the video’s existing width… What’s the issue?

Test page: http://kzmnt.com/test/

Lines 55 through 59 are in question (reformatted for reading ease):

var windowWidth = document.viewport.getWidth();
var windowHeight =  document.viewport.getHeight();
var vid = document.getElementById('live');
vid.style.left = ((windowWidth - parseInt(vid.style.width,10)) / 2) + "px";
vid.style.top = ((windowHeight - parseInt(vid.style.height,10)) / 2) + "px";

Ideas?

Thanks for your help!

Answer 1

var windowWidth = document.viewport.getWidth();
var windowHeight =  document.viewport.getHeight();
var vid = document.getElementById('live');
vid.style.left = ((windowWidth - (vid.width)) / 2) + "px";
vid.style.top = ((windowHeight - (vid.height)) / 2) + "px";