不带字母盒的全背景HTML5视频

关于如何制作背景HTML5视频，这里有很多问题，但我对此没有异议，它工作正常（除了一个小问题，在我在页面上选择某个内容或调整其大小之前，它只播放音频而不播放视频，请参见此处了解该问题：

我想做的是使视频适合背景，这样它就不会有任何字母框（纵横比不匹配时，上面/下面或侧面的线条）。这意味着高度小于比例时适合宽度，宽度小于比例时适合高度

这会切断一些视频，但没关系，我只想去掉字母盒。有没有办法只用CSS来做到这一点，如果没有的话，我需要使用什么javascript/jQuery/什么

到目前为止，我的代码是：

#mashvid {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    min-width: 100%;
    z-index: -5;
}

<video preload id="mashvid" poster="images/mashvid_poster.png">
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'>
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'>
      Your browser does not support the video tag.
</video>

#mashvid{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：自动；
最小宽度：100%；
z指数：-5；
}
您的浏览器不支持视频标记。

我已经尝试了两（2）个不同的jQuery插件，它们在这个问题上做得相当好。 一个很好的插件，带有回调和导航/控制功能和样式，在移动“迄今为止的ee”上不起作用，但在windows和osx上非常好

及

一个更简单的插件更容易定制，但也不那么健壮，这与mobile safari有同样的问题，但在其他方面功能非常强大

我发现的问题是，在不同操作系统上的smae浏览器中，缩放连接到身体的bg视频或img bg会有不同的行为

机器人safari和ie拒绝在windows平台上按我的喜好缩放宽度，但在osx上的行为与预期一致，您的里程可能会有所不同

=-）

我已经尝试了两（2）个不同的jQuery插件，它们在这个问题上做得相当好。 一个很好的插件，带有回调和导航/控制功能和样式，在移动“迄今为止的ee”上不起作用，但在windows和osx上非常好

及

一个更简单的插件更容易定制，但也不那么健壮，这与mobile safari有同样的问题，但在其他方面功能非常强大

我发现的问题是，在不同操作系统上的smae浏览器中，缩放连接到身体的bg视频或img bg会有不同的行为

机器人safari和ie拒绝在windows平台上按我的喜好缩放宽度，但在osx上的行为与预期一致，您的里程可能会有所不同

---

=-）

我这样解决了它，尽管我不确定它有多坚固

function dimensionFunction() {

    if ($('video').height() <= $(window).height()) {

        $('video').height($(window).height());
        $('video').width('auto');

    } else {

        $('video').width($(window).width());
        $('video').height('auto');

    }

    if ($('video').width() <= $(window).width()) {

        $('video').width($(window).width());
        $('video').height('auto');

    } else {

        $('video').height($(window).height());
        $('video').width('auto');

    }

}

函数维度函数（）{
如果（$（'video'）.height（）我是这样解的，尽管我不确定它有多坚固

function dimensionFunction() {

    if ($('video').height() <= $(window).height()) {

        $('video').height($(window).height());
        $('video').width('auto');

    } else {

        $('video').width($(window).width());
        $('video').height('auto');

    }

    if ($('video').width() <= $(window).width()) {

        $('video').width($(window).width());
        $('video').height('auto');

    } else {

        $('video').height($(window).height());
        $('video').width('auto');

    }

}

函数维度函数（）{
如果（$（'video'）.height（）这就是我最终如何做到的。必须有哪个维度更大的逻辑。我想知道随着时间的推移CSS将获得多少动态样式功能。这就是我最终如何做到的。必须有哪个维度更大的逻辑。我想知道CSS将获得多少动态样式功能呃，时间。这可能会有帮助：这可能会有帮助：