桌面内全屏视频背景(水平布局)
我想让视频背景是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>
尝试更换
#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;
}
没有很好的兄弟。结果很糟糕。 td1是全屏视频。当我尝试你的代码时,td1的宽度比预期的要长得多,视频也消失了。 –
好吧,试着用你的“#table1”(1102px) –
的高度代替“#container”和“#container视频”的最小高度,高度仍然结束。因为宽度越大,视频的高度也越大。 –
的另一种方式请参见:http://*.com/questions/3779771/html-5-video-stretch –