Forums » Help » Changing Canvas aspect ratio shows videos in "border" region

Maybe someone can enlighten me...

I added a video in the index.html file as so:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>

and I play it and draw it with this:

window.ig.system.context.drawImage( this.CurrentMovie, xPos, yPos, 320, 240 );

That works great.

Then I added the following code to adjust the screen size aspect ratio depending on the browser window aspect ratio:

var canvas = ig.$('#canvas');
var gameWidth = window.innerWidth;
var gameHeight = window.innerHeight;

var idealwidth = 1920;
var idealheight = 1080;

var scaleToFitX = gameWidth / idealwidth;
var scaleToFitY = gameHeight / idealheight;

var optimalRatio = Math.min(scaleToFitX, scaleToFitY);

canvas.style.width = idealwidth * optimalRatio + "px";
canvas.style.height = idealheight * optimalRatio + "px";

ig.internalScale = idealwidth / (idealwidth * optimalRatio);

ig.main('#canvas', MyGame, 60, idealwidth, idealheight, 1);

----------

Which seems to work pretty well so far (except for mouse click x,y are offset).

The issue I see is I see two instances of my video. One in my game and one "outside" my game area in the "border" region of my game. So if I resize my browser so the width is a lot larger than the height for example. I expected to see the "clear" color of black in this border region surrounding my game. Instead, I see my videos playing in the border region which I do not want to see. It seems this is where the default html5 positions these videos for me.

I'm a little confused...Are there 2 canvases drawing here? Is there a default HTML canvas and then the Impact canvas that I resized for my game? I would like to have these videos outside of my aspect ratio removed but I need to understand what is going on here first.

Thank you for your help in advance!

Solved. I wrapped my <video> elements inside:

<div style="position: absolute; top: 50px; left: 600px; display:none">

Notice the "display:none"

Now the extra videos are not there (which is correct).

So I will now assume there are 2 different canvases. One for the page and one for impact. Is that correct?