[英]how to make video fit to screen
我想制作全屏视频
最近我使用图像作为封面,但我改变了主意,我想使用视频https://jsfiddle.net/fpjqh822/10/
那是我的旧代码
这是我的视频代码
<div class="embed-responsive embed-responsive-16by9">
<video controls poster="http://www.webestools.com/page/media/videoTag/BigBuckBunny.png">
<source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
<div id="body2">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>
我只想将 img 更改为视频。 正如你从小提琴中看到的那样。 我的 id 测试适合屏幕,但我想输入的视频不适合。甚至不适合屏幕甚至没有响应。 如何制作适合屏幕和响应的视频全屏
像这样的带有视频的代码笔的结果
http://codepen.io/vicario/pen/jqBNLN
仍然有更高的高度所以不适合屏幕
这个解决方案应该适合你: https : //jsfiddle.net/Garconis/6mscbLer/
HTML:
<div class="wrapper">
<video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28831/Typer.mp4" autoplay loop></video>
</div>
CSS:
.wrapper {
width:100%;
height:100vh;
overflow: hidden;
background-image: url(http://www.webestools.com/page/media/videoTag/BigBuckBunny.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.wrapper video {
object-fit: cover;
width:100%;
height:100%;
}
将此代码添加到您的 css 文件中
video{
max-width: 100%;
}
见小提琴: https : //jsfiddle.net/fpjqh822/12/
编辑:
我想我应该注意,在您的情况下,您必须添加min-width: 100%;
到视频,所以视频永远不会改变它的大小,并且仍然是用户屏幕的 100%(取决于父 div -包含视频的父 div 也必须设置为 100%,没有任何边距或填充)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.