如何使视频适合屏幕

时间:2016-03-18 23:23:50

标签: jquery html css video

想制作全屏视频

最近我使用图像作为封面,但我改变主意,我想使用视频 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

还有更多的高度,因此不适合屏幕

2 个答案:

答案 0 :(得分:1)

此解决方案应该适合您: 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%;
}

答案 1 :(得分:0)

将此代码添加到您的css文件

video{
max-width: 100%;
}

请参阅小提琴:https://jsfiddle.net/fpjqh822/12/

修改

我想我应该注意,在您的情况下,您必须将min-width: 100%;添加到视频中,以便视频永远不会改变它的大小,并且仍然是用户屏幕的100%(取决于父级) div - 包含视频的父div也必须设置为100%,没有任何边距或填充