視頻窗口不適合屏幕寬度

我有這個網站在這裏：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

視頻窗口不適合屏幕寬度

回答

相關問題