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

一、csss设置

html:

<div class="wrap">    <video controls="controls"  class="videoBox" #iframeurl>        <source src="3a1be272f8b.mp4" type="video/mp4" />    </video></div>

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:

<video controls="controls"  class="videoBox" #iframeurl>    <source src="a1be272f8b.mp4" type="video/mp4" /></video>

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";