Question

我有一个视频，我希望它能够填充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;
 }

Answer 1

通过检查其他答案，我在CSS中使用了对象：

video {
    object-fit: fill;
}

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

object-fit CSS属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中。

值：填写

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

Answer 2

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

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

Answer 3

您可以使用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();

Answer 4

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

video {
  object-fit: cover;
}

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

^{PS：我在这里Leo Yu's answer延伸。}

Answer 5

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

＆＃13;

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

＆＃13;

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

Answer 6

最简单＆amp;响应。

<body>
  <video src="full.mp4" autoplay muted loop></video>
</body>
video {
  height: 100vh;
  width: 100%;
  object-fit: fill;
  position: absolute;
}

Answer 7

将视频放入父div内，并全部设置为100％的宽度和高度，并带有封面。这样可以确保视频不会失真，并且始终会完全填充div。

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

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

Answer 8

我使用JavaScript和CSS来实现这一目标。需要在init和窗口调整大小时调用一次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%);
}

Answer 9

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

＆＃13;

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

＆＃13;

Answer 10

我是所有这一切的新手。也许您可以添加/更改此HTML代码。不需要CSS。它对我有用：）

width="100%" height="height"

Answer 11

我们尝试了以下代码，并且可在Samsung TV，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>

Answer 12

将此CSS用于高度

height: calc(100vh) !important;

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

Answer 13

<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>

视频100％宽度和高度

13 个答案: