html5 video iframe视频自适应手机大小

html5 video iframe视频自适应手机大小

css样式

.videobox{
    width:100%;background: #000;
    position:relative;
    padding-bottom:56.25%;    /*需要用padding来维持16:9比例,也就是9除以16*/
    height: 0;
}
.videobox video{ /* 如果是iframe直接把video替换成iframe即可 */
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%
}

html代码

<div class="videobox">
    <video controls autoplay loop>
    <source src="" type="video/mp4">
    </video>
</div>