Scale video with HTML5 canvas. Need guidance...

i adding video (in small window) on html5 canvas using function below. works great except not resize canvas. have action @ beginning of timeline resizes canvas browser window size. getting bit more complicated can handle. need direction on how apply same resize functionality video. want resize browser stay in location on stage.

 

//add video//

 

this.makediv = function (x, y, w, h, html, css) {

  // create , initialize div element

  var d = document.createelement("div");

  d.style.csstext = "visibility:visible; position:absolute; left:0; top:0; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

  d.innerhtml = html;

  // attach element createjs stage

  canvas.parentnode.appendchild(d);

  var cjsdom = new createjs.domelement(d);

  cjsdom.x = x;

  cjsdom.y = y;

  return stage.addchild(cjsdom);

 

}

 

this.makediv(600, 600, 1920, 1080, "<video width=640 height=480 src='weblinksetup.mp4' autoplay></video>");

 

 

__________________________________________________________________________________________ _________________________________________________________

 

 

 

//resize stage//

 

var page_body = document.getelementsbytagname("body")[0];

page_body.style.backgroundcolor = "#000000";

page_body.style.overflow = "hidden";

page_body.style.position = "fixed";

 

 

var page_canvas = document.getelementsbytagname("canvas")[0];

stagewidth = page_canvas.width;

stageheight = page_canvas.height;

 

 

var viewport = document.queryselector('meta[name=viewport]');

var viewportcontent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

 

 

if (viewport === null) {

var head = document.getelementsbytagname('head')[0];

viewport = document.createelement('meta');

viewport.setattribute('name', 'viewport');

head.appendchild(viewport);

}

 

 

viewport.setattribute('content', viewportcontent);

 

 

function onresize() {

var widthtoheight = stagewidth / stageheight;

var newwidth = window.innerwidth;

var newheight = window.innerheight;

var newwidthtoheight = newwidth / newheight;

//

if (newwidthtoheight > widthtoheight) {

newwidth = newheight * widthtoheight;

page_canvas.style.height = newheight + "px";

page_canvas.style.width = newwidth + "px";

} else {

newheight = newwidth / widthtoheight;

page_canvas.style.height = newheight + "px";

page_canvas.style.width = newwidth + "px";

}

scale = newwidthtoheight / widthtoheight;

stage.width = newwidth;

stage.height = newheight;

page_canvas.style.margintop = ((window.innerheight - newheight) / 2) + "px";

page_canvas.style.marginleft = ((window.innerwidth - newwidth) / 2) + "px";

}

 

 

window.onresize = function () {

onresize();

}

 

 

onresize();

why don't make video percentage of page size?

More discussions in Adobe Animate CC - General

adobe