javascript - 表格内的全屏视频背景(水平布局)

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;

}