Video 100% width and height

后端未结

关注

 13  1994

Happy的楠姐

I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.

Is it possible that it at least fills 100% for both? And

相关标签:

13条回答

走了就别回头了

2020-12-08 07:12
This is a great way to make the video fit a banner, you might need to tweak this a little for full screen but should be ok. 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%);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

逝去的感伤

2020-12-08 07:12

We tried with the below code & it works on 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>

0 讨论(0)

野性不改

2020-12-08 07:14
If you're looking for the equivalent to background-size: cover for video.
```
video {
  object-fit: cover;
}
```
This will fill the container without distorting the video.

^{PS: I'm extending on Leo Yu's answer here.}
0 讨论(0)
发布评论:

提交评论
- 加载中...
不要未来只要你来

2020-12-08 07:14
Put the video inside a parent div, and set all to 100% width & height with fill of cover. This will ensure the video isn't distorted and ALWAYS fills the div entirely.
```
.video-wrapper {
    width: 100%;
    height: 100%;
}

.video-wrapper video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

天命终不由人

2020-12-08 07:20

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

0 讨论(0)

时光取名叫无心

2020-12-08 07:20
I am new into all of this. Maybe you can just add/change this HTML code. Without need for CSS. It worked for me :)
```
width="100%" height="height"
```
0 讨论(0)
发布评论:

提交评论
- 加载中...