我的 jquery 脚本正在向 html5 视频添加空格答案

【问题标题】：My jquery script is adding white space to html5 video我的 jquery 脚本正在向 html5 视频添加空格
【发布时间】：2014-07-31 13:46:22
【问题描述】：

我正在使用这个 jquery sn-p 来确保我的 html5 背景视频保持居中、全屏并正确对齐。 `

$(document).ready(function() {

var $win = $(window),
    $video = $('#full-video'),
    $videoWrapper = $video.parent();

function scaleVideo() {
    var isWider = ( $video.width() > $videoWrapper.width() ) ? true : false,
        isTaller = ( $video.height() > $win.height() ) ? true : false,
        widthDifference = $video.width() - $videoWrapper.width(),
        heightDifference = $video.height() - $videoWrapper.height();

    ( isWider ) ? $video.css('left',-parseInt(widthDifference / 2)) : $video.css('left', '0');
    ( isTaller ) ? $video.css('top', -parseInt(heightDifference / 2)) : $video.css('top', '0');
}

scaleVideo();
$win.resize(function() {
    scaleVideo();
});
});

起初它什么也没做所以我在它周围添加了 $(document).ready(function()出现在视频右侧。如果我完全调整浏览器窗口的大小，它会消失，但如果我重新加载/刷新页面，它会再次出现。

这里有一个链接：http://wabi-sabi.cc

这是html：

<body> <div class="slide-wrapper"> <div class="full-video-wrapper"> <video id="full-video" muted preload autoplay loop> <source src="videos/wabisabiwebvideo.webm" type="video/webm"> <source src="videos/wabisabiwebvideo.mp4" type="video/mp4"> </video> </div> </div> </body>

这是css：

.slide-wrapper {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.full-video-wrapper {
background: white;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
overflow: hidden;
}

#full-video {
display: block;
position: absolute;
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

感谢您的帮助！

【问题讨论】：

你能发布你的html吗？ #full-video的html标签是什么？
对不起 abmitchell，我过早地发布了，我已经添加了 html 和 css
你确定这就是一切吗？我没有得到任何空白。这是否托管在我可以查看的网站上？
我可能忽略了一些东西，但自从我提出这个问题以来，我已经做出了一些改变。问题还是一样，不过我先放在这里：evinulrichpohl.com/wabisabitest
我刚刚注意到 Chrome 中的空白区域更大

标签： javascript jquery html html5-video whitespace

【解决方案1】：

好吧，想通了。这很简单，真的，我只是 Javascript 的新手

而不是使用 $(document).ready(function() { ... });

我用window.onload = function() { ... }

在页面正确加载之前，我正在制作脚本。现在我有一个很棒的背景视频，它在调整窗口大小时保持居中和对齐！

希望其他学习 javascript 的人也可以从中学习。

【讨论】：