视频 100% 宽度和高度答案

【问题标题】：Video 100% width and height视频 100% 宽度和高度
【发布时间】：2013-12-06 07:46:39
【问题描述】：

我有一个视频，我希望它填充 100% 的宽度和 100% 的高度。并保持纵横比。

是否有可能两者都至少填充 100%？如果视频的一部分必须在屏幕外以保持纵横比，那也没关系。

HTML：

    <video preload="auto" class="videot" id="videot" height="100%" preload>
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
    <object data="BESTANDEN/video/tible.mp4" height="1080">
        <param name="wmode" value="transparent">
        <param name="autoplay" value="false" >
        <param name="loop" value="false" >
    </object>

CSS：

 .videof, .videot {
    width: 100%    !important;
    height: 100%   !important;
 }

【问题讨论】：

尝试改用max-width 和max-height。通过将 width 和 height 设置为 100%，您可能会拉伸视频以适应这些确切的尺寸。
我改用了 min-width 和 min-height，因为 max-height 和 width 不起作用。但是现在视频是全屏的，但是宽度还有一个最大值；视频大小。而且它不会变大......

标签： html css html5-video fullscreen

【解决方案1】：

通过检查其他答案，我在 CSS 中使用了 object-fit：

video {
    object-fit: fill;
}

来自 MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)：

object-fit CSS 属性指定被替换元素的内容应如何适应由其使用的高度和宽度建立的框。

值：填充

被替换的内容的大小可以填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。

【讨论】：

这会扭曲我的视频。
也可以使用object-fit: contain;（以及其他选项）
这简直是最好的解决方案！应标记为正确！
请注意，此解决方案不适用于 IE11 或 Edge。
为我工作。谢谢。

【解决方案2】：

如果您正在寻找与background-size: cover 等效的video。

video {
  object-fit: cover;
}

这将填充容器而不会扭曲视频。

^{PS：我在这里扩展Leo Yu's answer。}

【讨论】：

【解决方案3】：

最简单且响应迅速。

<video src="full.mp4" autoplay muted loop></video>

<style>
    video {
        height: 100vh;
        width: 100%;
        object-fit: fill; // use "cover" to avoid distortion
        position: absolute;
    }
</style>

【讨论】：

这是正确答案。至于实际填充宽度和高度的 100%。如果您不希望视频失真，请改用object-fit:cover.. 但这是正确的。不需要js，纯css

【解决方案4】：

video {
  width: 100%    !important;
  height: auto   !important;
}

看这里 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

【讨论】：

尽管如此，这是我需要的解决方案 ;) thx 对于那个小费，这里不需要 !important。
一个提示：将object-fit: fill; 添加到video 标签。它会拉伸到 100%。并将宽度和高度保持在 100%
经过大约两个小时的实验，这成功了。非常感谢。

【解决方案5】：

您可以使用 Javascript 将高度动态设置为窗口的 100%，然后根据视频宽度与窗口宽度的比率使用负左边距将其居中。

http://jsfiddle.net/RfV5C/

var $video  = $('video'),
    $window = $(window); 

$(window).resize(function(){
    var height = $window.height();
    $video.css('height', height);

    var videoWidth = $video.width(),
        windowWidth = $window.width(),
    marginLeftAdjust =   (windowWidth - videoWidth) / 2;

    $video.css({
        'height': height, 
        'marginLeft' : marginLeftAdjust
    });
}).resize();

【讨论】：

这不会同时填充宽度和高度，如果您放大窗口大小，则会留下空白。所以他的问题并不是一个可以接受的答案。
如果调整窗口大小，需要调用函数来改变视频大小。 jQuery：$( window ).resize(function() { console.log("run resize function again!");});
看起来像 jquery，而不是 javascript

【解决方案6】：

这适用于 div 容器中的视频。

.videoContainer 
{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}

.videoContainer video 
{
    min-width: 100%;
    min-height: 100%;
}

参考：http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

【讨论】：

【解决方案7】：

我使用 JavaScript 和 CSS 来实现这一点。 JS 函数需要在初始化和调整窗口大小时调用一次。刚刚在 Chrome 中测试。

HTML：

<video width="1920" height="1080" controls>
    <source src="./assets/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

JavaScript：

function scaleVideo() {
    var vid = document.getElementsByTagName('video')[0];
    var w = window.innerWidth;
    var h = window.innerHeight;

    if (w/16 >= h/9) {
        vid.setAttribute('width', w);
        vid.setAttribute('height', 'auto');
    } else {
        vid.setAttribute('width', 'auto');
        vid.setAttribute('height', h);
    }
}

CSS：

video {
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

【讨论】：

【解决方案8】：

将视频放在父 div 中，并将所有内容设置为 100% 的宽度和高度并填充封面。这将确保视频不失真，并且始终完全填满 div。

.video-wrapper {
    width: 100%;
    height: 100%;
}

.video-wrapper video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

【讨论】：

【解决方案9】：

<style>
    .video{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover}
  }
</style>
<video class= "video""
  disableremoteplayback=""
  mqn-lazyimage-video-no-play=""
  mqn-video-css-triggers="[{&quot;fire_once&quot;: true, &quot;classes&quot;: [&quot;.mqn2-ciu&quot;], &quot;from&quot;: 1, &quot;class&quot;: &quot;mqn2-grid-1--hero-intro-video-meta-visible&quot;}]"
  mqn-video-inview-no-reset="" mqn-video-inview-play="" muted="" playsinline="" autoplay>

<source src="https://github.com/Slender1808/Web-Adobe-XD/raw/master/Home/0013-0140.mp4" type="video/mp4">

</video>

【讨论】：

【解决方案10】：

这是使视频适合横幅的好方法，您可能需要稍微调整一下以全屏显示，但应该没问题。 100% CSS。

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);

【讨论】：

【解决方案11】：

一个简单的方法是将css更改为

.videot {
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

【讨论】：

【解决方案12】：

我们尝试使用以下代码，它适用于三星电视、Chrome、IE11、Safari...

<!DOCTYPE html>
<html>
<head>
    <title>Video</title>
    <meta charset="utf-8" />
    <style type="text/css" >

        html,body {
          height: 100%;
          text-align: center;
          margin: 0;
          padding:0;
        }

        video {
            width: 100vw; /*100% of horizontal viewport*/
            height:100vh; /*100% of vertical viewport*/
        }

    </style>
</head>
<body>
        <video preload="auto" class="videot" id="videot" preload>
            <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
            <object data="BESTANDEN/video/tible.mp4" height="1080">
                <param name="wmode" value="transparent">
                <param name="autoplay" value="false" >
                <param name="loop" value="false" >
            </object>
        </video>
</body>
</html>

【讨论】：

【解决方案13】：

使用这个css作为高度

height: calc(100vh) !important;

这将使视频具有 100% 的垂直高度。

【讨论】：

【解决方案14】：

我对这一切都不熟悉。也许您可以添加/更改此 HTML 代码。无需 CSS。它对我有用:)

width="100%" height="height"

【讨论】：

感谢您为社区做出贡献的渴望，但这是错误的（height 属性不会将“height”作为有效值）。