Mil*_*lan 32 html css fullscreen html5-video
我有一个视频,我想要它填充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;
}
Leo*_* Yu 55
通过检查其他答案,我在CSS中使用了object-fit:
video {
object-fit: fill;
}
来自MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):
object-fit CSS属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中.
价值:填写
替换的内容大小适合填充元素的内容框:对象的具体对象大小是元素的使用宽度和高度.
Fab*_*ltz 12
如果您正在寻找相当于background-size: cover为video.
video {
object-fit: cover;
}
这将填充容器而不会扭曲视频.
PS:我在这里延伸了Leo Yu的答案.
Jer*_*.me 11
video {
width: 100% !important;
height: auto !important;
}
看看这里 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Gla*_*e24 11
您可以使用Javascript将高度动态设置为窗口的100%,然后根据视频宽度与窗口宽度的比率使用负左边距将其居中.
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();
Lee*_*Hoe 10
这适用于我在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
小智 6
最容易和响应。
<body>
<video src="full.mp4" autoplay muted loop></video>
</body>
video {
height: 100vh;
width: 100%;
object-fit: fill;
position: absolute;
}
小智 6
将视频放入父 div 中，并将宽度和高度全部设置为 100%，并填充封面。这将确保视频不失真并且始终完全填满 div。
.video-wrapper {
width: 100%;
height: 100%;
}
.video-wrapper video {
object-fit: cover;
width: 100%;
height: 100%;
}
一个简单的方法是将 css 更改为
.videot {
width: 100%;
height: 100%;
object-fit: cover;
}
我使用 JavaScript 和 CSS 来实现这一点。JS 函数需要在 init 和窗口调整大小时调用一次。刚刚在 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%);
}
| 归档时间： |
|
| 查看次数： |
124867 次 |
| 最近记录： |