视频窗口不适合屏幕宽度答案

【问题标题】：Video window not fitting to width of screen视频窗口不适合屏幕宽度
【发布时间】：2012-03-05 17:36:24
【问题描述】：

我在这里有这个网站：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');
};

【问题讨论】：

你试过 $(window).width() 和 $(window).height() 来获取浏览器视口的尺寸吗？

标签： jquery css html video flash

【解决方案1】：

而不是所有这些 javascript...您可以仅使用 css 来实现这一点...只需将视频的宽度和高度指定为 100% 并将其父 css 属性指定为max-width:100%;

【讨论】：

那行不通，因为我不希望它完全填满屏幕。我希望页眉和页脚保持可见。

【解决方案2】：

您需要修复 CSS，我不确定 sublime 视频是如何工作的，但视频容器似乎具有 200 像素的固定高度和 400 像素的固定宽度。我会试试看：

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

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

【讨论】：

我也试过了。它只是使视频窗口变成 200px x 200px。
你的容器（#slide1video）有固定的高度和宽度吗？
好吧，我还没有设置，但是托管的 javascript 可能会继承视频本身的宽度和高度。 Sublime Video JS 旨在处理全屏视频。当你调整浏览器大小时，我只需要它来改变大小。