动态设置video的宽高的方法，js设置和CSS设置

一、csss设置

html:

class="wrap">
    

css:

.wrap{
    width:100%;
    position:relative;
    padding-bottom:62%;    /*需要用padding来维持16:9比例,也就是9除以16*/
    height: 0;
    video{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%
    }
}

JS的方法：

思路：用js获取到当前video的DOM，再对DOM进行动态的宽高设置

以下是以angular的例子展示，在纯JS里面也是一样的道理

html:

TS:

获取DOM的方法

@ViewChild('iframeurl') iframeurl:ElementRef;

let iwidth = screen.width;
let iheight = iwidth*0.62;
console.log(iheight+"高度"+iwidth);
this.iframeurl.nativeElement.style.width = iwidth+"px";
this.iframeurl.nativeElement.style.height = iheight+"px";