视频窗口不适合屏幕宽度

我有这个网站在这里：www.bigideaadv.com/xsp我试图让一个视频弹出，当你点击观看视频链接。问题是我想要它扩大浏览器的宽度和浏览器的高度 - 242px。它在Firefox中正常工作，调整窗口大小时调整视频大小。在Safari和IE 7+中，没有骰子。变量正在使用调整大小上的新值更新，但不会更新CSS属性。它保持在视频的最初价值。任何人有任何想法？提前致谢。代码如下：视频窗口不适合屏幕宽度

function resize() { 
    var viewportwidth; 
    var viewportheight; 

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) 
    // use window.innerWidth and window.innerHeight 
    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth, viewportheight = window.innerHeight 
     //alert(viewportwidth); 
     //alert(viewportheight); 
    } 

    // IE6 in standards compliant mode 
    //(i.e. with a valid doctype as the first line in the document) 
    else if (typeof document.documentElement != 'undefined' 
      && typeof document.documentElement.clientWidth != 'undefined' 
      && document.documentElement.clientWidth != 0) { 
     viewportwidth = document.documentElement.clientWidth, 
     viewportheight = document.documentElement.clientHeight 
    } 

    // older versions of IE 
    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'); 
};

来源

2012-03-05 Dave Rottino

您是否尝试使用$（window）.width（）和$（window）.height（）来获取浏览器视口的维度？ – 2012-03-05 17:41:58

而不是所有这个JavaScript ...你可以只用CSS实现这个....只是指定的宽度和视频为100％的高度和其母公司的CSS属性为max-width:100%;

来源

2012-03-05 17:52:45 Abhidev

这不起作用，因为我不希望它完全填满屏幕。我希望页眉和页脚保持可见。 – 2012-03-05 19:54:44

你试过设置最大宽度：100％吗？ – Abhidev 2012-03-06 05:48:10

你需要修复你的CSS，我不知道如何崇高的视频工作，但视频容器似乎有一个固定的宽度为400px的固定高度200px &。我想试试这个：

#sublime_video_wrapper_0{ 
    width:100% !important; 
    height:100% !important; 
}

这应该解决这个问题的WebKit浏览器，甚至是IE浏览器，但我没有测试它。

来源

2012-03-05 18:53:31 HjalmarCarlson

我也试过。它只是使视频窗口200px x 200px。 – 2012-03-05 19:55:34

你的容器（＃slide1video）有固定的高度和宽度吗？ – HjalmarCarlson 2012-03-05 20:12:06

嗯，我没有设置一个，但托管的JavaScript可能会继承视频本身的宽度和高度。 Sublime Video JS旨在处理全屏视频。在调整浏览器大小时，我只是需要它来改变大小。 – 2012-03-05 22:52:59

视频窗口不适合屏幕宽度

回答

相关问题