I need some assistance with a website I'm working on, accessible at www.bigideaadv.com/xsp. My goal is to have a video pop up when the user clicks on the watch video link. The challenge I'm facing is that I want the video to expand both the width and height of the browser by 242px. Everything works perfectly in Firefox as the video resizes accordingly when the window size changes. However, Safari and IE 7+ are presenting issues. Although the variables update with new values upon resize, the CSS properties remain static at the initial video size. Any thoughts or suggestions would be greatly appreciated. Thank you in advance. Below is the relevant code:
function resize() {
var viewportwidth;
var viewportheight;
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth;
viewportheight = window.innerHeight;
} else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth != 'undefined'
&& document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth;
viewportheight = document.documentElement.clientHeight;
} else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
}
viewportheight = viewportheight - 242;
$('#sublime_video_wrapper_0').css('width', viewportwidth);
$('#sublime_video_wrapper_0').css('height', viewportheight);
$('#sublime_vixdeo_wrapper_0').css('z-index', '1003');
$('#slide1video embed').css('width', viewportwidth);
$('#slide1video embed').css('height', viewportheight);
$('#slide1video embed').css('z-index', '1002');
$('#slide1video').css('width', viewportwidth);
$('#slide1video').css('height', viewportheight);
$('#slide1video').css('z-index', '1001');
$('video.sublime').css('width', viewportwidth);
$('video.sublime').css('height', viewportheight);
$('video.sublime').css('z-index', '1000');
};