JS如何动态的改变元素大小？

当浏览器被拉大后，页面播放器不会跟着变大，求方法

 <html>
<body>
<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>
<video src="https://tbm.alicdn.com/H86HavvWu3jbqtgR3Q4/KwXq5G3BDAaJMIOC60s%40%40hd.mp4" width="784" height="522" controls preload></video>
</body>
</html>

高度宽度不要写死
$(window).resize(function(){
let winW = $(window).width();
$("video").attr("width", winW);
});

video 元素按照百分比设置宽高

同意上面的说法，video 元素按照百分比设置宽高

高度不要写死，按百分比设置宽高

 $(window).resize(function(){
   $("video:first").attr("width", 你要的值);
});

video标签使用的时候用百分比当你的浏览器拉伸的时候它还是那个比例

video元素按照百分比设置宽高高度不要固定

如果使用: width="784" height="522"就会写死大小。使用百分百设置高宽

把你的video元素里头的height 和width设置为百分比。这时候就是相对于父容器的长和宽的占比了。你拉浏览器。它就会跟着变了

高度不要写死，按百分比设置宽高。

其实高度很难用百分比控制，除非整个页面只有视频一个标签。我推荐1楼的方法

width设置成%的形式，height设置成auto就可以自适应了。
当然你要是不想让他超出一定的范围。你可以加一个max-width。

高和宽设置百分比就可以了或者使用样式表再特定屏幕大小的时候分别载入对应的样式

width好弄直接设置成百分比需要100%就设成100% 需要80%就设置成80% 他会自动根据父元素的宽度计算
height的话，在video标签中设置成100%
然后加入下面的js 动态赋值高度（ps:需要最低或最高高度的话可以加个min_height或者max_height,宽度也一样）

autodivheight();
function autodivheight(){ //函数：获取尺寸
//获取浏览器窗口高度
var winHeight=0;
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight)
winHeight = document.documentElement.clientHeight;
//DIV高度为浏览器窗口的高度
console.log("浏览器高度");
console.log(winHeight);
//减60和减120 是因为有padding、margin、border以及 databox(高度固定72) 也只是一个大致的数据并不精确
winHeight1=(winHeight-60)/3;
winHeight2=(winHeight-120)/2;
console.log(winHeight1);
document.getElementById("conbody").style.height= winHeight +"px";
//document.getElementById("col-3-m").style.margin-left= winHeight1 +"px";
/*document.getElementById("col-3-l").style.width= winHeight1 +"px";
document.getElementById("col-3-r").style.width= winHeight1 +"px";
document.getElementById("col-50-l").style.width= winHeight1 +"px";
document.getElementById("col-50-r").style.width= winHeight1 +"px"; */
document.getElementById("chart7").style.height= winHeight1 +"px";
document.getElementById("chart8").style.height= winHeight1 +"px";
document.getElementById("chart9").style.height= winHeight1 +"px";
document.getElementById("chart10").style.height= winHeight1 +"px";
document.getElementById("chart2").style.height= winHeight1 +"px";
document.getElementById("chart3").style.height= winHeight1 +"px";
document.getElementById("chart4").style.height= winHeight1 +"px";
document.getElementById("chart5").style.height= winHeight2 +"px";
document.getElementById("chart6").style.height= winHeight2 +"px";
document.getElementById("chart1").style.height= winHeight2 +"px";
document.getElementById("chart11").style.height= winHeight2 +"px";
//document.getElementById("topinfo").style.height= winHeight7 +"px";
//document.getElementById("concontainer").style.width= winHeight +"px";
//DIV高度为浏览器窗口高度的一半
//document.getElementById("test").style.height= winHeight/2 +"px";
}
window.onresize=autodivheight;

如果你要拉伸还会变的话你就要写监听当浏览器宽度变化的时候根据比例去更改视频的宽度。

用百分比，例如，width:98%;

宽度设置成百分比，高度可以设置一个min-height，方便在没有内容时候也能显示

建议用一个父容器把video包裹起来，父容器随着浏览器的大小进行响应式变化，video标签就直接宽度100%。

 <html>
 <head>
 <style>
  .v-box{
       width:100%;           /**父容器根据浏览器的宽度动态变化宽度**/
    }

      .v-box>vedio{
            width:100%;
        }
 </style>
 </head>
<body>
<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>
<div class="v-box">
<video src="https://tbm.alicdn.com/H86HavvWu3jbqtgR3Q4/KwXq5G3BDAaJMIOC60s%40%40hd.mp4"  controls preload></video>
</div>
</body>
</html>

改成百分比就好了，问题不大。