Javascript 桌内全屏视频背景（水平布局）

我想让视频背景是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>

我正在使用jquery:mouseweel.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>

$（函数（）{
$（“body”）.mousewheel（函数（事件，增量）{
这个.scrollLeft-=（增量*30）；
event.preventDefault（）；
});   
});

尝试更换

#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是全屏视频。当我尝试你的代码时，td1的宽度比预期的要长得多，视频也消失了。好的，尝试用你的“#table1”（1102px）的高度替换“#container”和“#container video”的最小高度。高度仍然超过。因为当宽度变大时，视频的高度也会变大。你能发布你的完整脚本吗？你是说javascript吗？另一种方法请参见：

#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;

}