html5的video标签自动填充满父级div的大小

责编:menVScode 2017-10-10 17:14 阅读(1239)

使用video标签,视频总不能占满父级全屏,如下图所示,本文提供了两个方法来解决这个问题:

QQ截图20171010170304


方法一:原理是父级的div将video超出部分给隐藏了,这种方法属于奇淫技巧、野路子,->_->。

.videoBox {width: 100%;position: relative;height: 980px;background: #000;overflow: hidden;min-width: 1200px;}
#myVideo {position: relative;display: block;left: 50%;margin-left: -960px;top: 50%;margin-top: -560px;}
<div class="videoBox">
        <video width="1920" height="1080" id="myVideo" loop autoplay  class="">
            <p class="font16 center" style="color: #00aaee;margin: 30px 0">不好意思,您的浏览器不支持此播放器,请升级浏览器!</p>
            <source src="http://moosefun.com/upload/2016/05/03/146228144769lvpat.mp4" type='video/mp4'>
        </video>
</div>


方法二:利用css3标签 object-fit:cover,不过不幸的是目前所有的ie浏览器都不兼容这个属性。cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。

QQ截图20171010171322

<div class="videoBox" style="width:244px;height:300px; overflow:hidden;">
    <video id="myVideo" style="width:100%;height:100%;object-fit:cover;"></video>
</div>
标签: video html5
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码