Question

我在这里有这个网站：www.bigideaadv.com/xsp，当我点击观看视频链接时，我正试图弹出一个视频。问题是我希望它扩展浏览器的宽度和浏览器的高度 - 242px。它在Firefox中工作正常，它会在您调整窗口大小时调整视频大小。在Safari和IE 7+中，没有骰子。变量在resize上使用新值进行更新，但不会更新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');
};

Answer 1

而不是所有这些javascript ...您只需使用css即可实现此功能....只需将视频的宽度和高度指定为100％，将其父css属性指定为max-width:100%;

Answer 2

你需要修复你的CSS，我不确定崇高的视频是如何工作的，但视频容器的固定高度似乎是200px＆amp;固定宽度为400px。我试试看：

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

这应该可以解决webkit浏览器的问题，甚至是IE，但我还没有测试过它。

视频窗口不适合屏幕宽度

2 个答案: