桌面內全屏視頻背景（水平佈局）

Question

我想讓視頻背景是100％的寬度和高度。但我不知道。我嘗試了很多方法，但無法提供幫助。

這是我想要的佈局：

但是，當我設置寬度100％，高度超過然後100％。然後另一個被打破。

這是我的代碼：

<table id="table1"> 
    <tr> 
     <td id="td1"> 
      <div id="container"> 
       <video autoplay="" loop="" id="myVideo" poster="images/pic01.jpg"> 
        <source type="video/mp4" src="videos/leadership.mp4"></source> 
       </video> 
      </div> 
     </td> 
     <td id="td2"> 
      <table id="table2"> 
       <tr> 
        <td id="td3"> 
         Menu 
        </td> 
        <td id="td4"> 
         <div id="container2"> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

那麼這是CSS：

body,html 
{ 
    height:100%; 
    width:150%; 
    margin:0 !important; 
    -webkit-scrollbar{ display:none;} 
} 

#table1 
{ 
    width:100%; 
    height:auto; 
    min-height:1000px; 
    margin:-2px 0 0 -2px!important; 
    border-collapse:collapse; 
} 

#td1 
{ 
    width:1920px; 
    min-height:1000px; 
    height:auto; 
} 

#container 
{ 
    width:1920px; 
    min-height:100%; 
    height:auto; 
    padding:0; 
    margin:0; 
    background:#2AAFDB; 
    display:block; 
} 

#container video 
{ 
    min-width:1920px; 
    min-height:98%; 
    z-index:-100; 
    width:auto; 
    height:auto; 
    position:absolute; 
    top:0; 
    left:0; 

} 
#td2 
{ 
    width:auto; 
    min-height:1000px; 
    height:auto; 
} 

#table2 
{ 
    width:100%; 
    height:auto; 
    min-height:1000px; 
    margin:-2px 0 0 -2px!important; 
    border-collapse:collapse; 
} 

#td3 
{ 
    width:15%; 
    background:#2AAFDB; 
    min-height:1000px; 
    height:auto; 
    background:#ED7BBC; 
} 

#td4 
{ 
    width:75%; 
    min-height:1000px; 
    height:auto; 
    z-index:-1; 
} 

#container2 
{ 
    width:auto; 
    height:auto; 
    min-height:1000px; 
    min-width:100%; 
    background:#D1C9CD; 
    padding:50px; 
    margin:0; 
} 

我使用jQuery：mousewheel.js。所以當我滾動鼠標時，它會水平移動。

編輯：

這是腳本：

(function($) { 

var types = ['DOMMouseScroll', 'mousewheel']; 

if ($.event.fixHooks) { 
    for (var i=types.length; i;) { 
     $.event.fixHooks[ types[--i] ] = $.event.mouseHooks; 
    } 
} 

$.event.special.mousewheel = { 
    setup: function() { 
     if (this.addEventListener) { 
      for (var i=types.length; i;) { 
       this.addEventListener(types[--i], handler, false); 
      } 
     } else { 
      this.onmousewheel = handler; 
     } 
    }, 

    teardown: function() { 
     if (this.removeEventListener) { 
      for (var i=types.length; i;) { 
       this.removeEventListener(types[--i], handler, false); 
      } 
     } else { 
      this.onmousewheel = null; 
     } 
    } 
}; 

$.fn.extend({ 
    mousewheel: function(fn) { 
     return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel"); 
    }, 

    unmousewheel: function(fn) { 
     return this.unbind("mousewheel", fn); 
    } 
}); 


function handler(event) { 
    var orgEvent = event || window.event, args = [].slice.call(arguments, 1), delta = 0, returnValue = true, deltaX = 0, deltaY = 0; 
    event = $.event.fix(orgEvent); 
    event.type = "mousewheel"; 

    // Old school scrollwheel delta 
    if (orgEvent.wheelDelta) { delta = orgEvent.wheelDelta/120; } 
    if (orgEvent.detail ) { delta = -orgEvent.detail/3; } 

    // New school multidimensional scroll (touchpads) deltas 
    deltaY = delta; 

    // Gecko 
    if (orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) { 
     deltaY = 0; 
     deltaX = -1*delta; 
    } 

    // Webkit 
    if (orgEvent.wheelDeltaY !== undefined) { deltaY = orgEvent.wheelDeltaY/120; } 
    if (orgEvent.wheelDeltaX !== undefined) { deltaX = -1*orgEvent.wheelDeltaX/120; } 

    // Add event and delta to the front of the arguments 
    args.unshift(event, delta, deltaX, deltaY); 

    return ($.event.dispatch || $.event.handle).apply(this, args); 
} 

})(jQuery); 

這個來電：

<script> 
    $(function(){ 
     $("body").mousewheel(function(event, delta) { 
      this.scrollLeft -= (delta * 30); 
      event.preventDefault(); 
     }); 
    }); 
    </script> 

Answer 1

嘗試更換

#td1 
{ 
    width:1920px; 
    min-height:1000px; 
    height:auto; 
} 

#container 
{ 
    width:1920px; 
    min-height:100%; 
    height:auto; 
    padding:0; 
    margin:0; 
    background:#2AAFDB; 
    display:block; 
} 

#container video 
{ 
    min-width:1920px; 
    min-height:98%; 
    z-index:-100; 
    width:auto; 
    height:auto; 
    position:absolute; 
    top:0; 
    left:0; 

} 

通過

#td1 
{ 
    min-height:1000px; 
    height:auto; 
    vertical-align:top; 
} 

#container 
{ 
    min-height:100%; 
    height:auto; 
    padding:0; 
    margin:0; 
    background:#2AAFDB; 
    display:block; 
} 

#container video 
{ 
    min-height:98%; 
    z-index:-100; 
    width:100%; 
    height:auto; 
    position:relative; 
    top:0; 
    left:0; 

}