Changing the aspect ratio of html5 video.

You can not directly change the video aspect of a video in a html5 video tag; however you can read the video (assuming it is on the same domain) and place it into a canvas … first create a canvas to hold the aspect ratio of the video 640 x 480 and use the style to size it in this case to a 100 x 100 box.

<canvas id=”processCanvas” height=”480″ width=”640″ style=”width:100px; height:100px”>


Now use straight javascript with canvas functions to copy the video from the video tag onto the canvas.

function draw( )


gold = document.getElementById(‘vid’);

process.drawImage(gold, 0,0,640,480);


var canvas = document.getElementById(‘processCanvas’);

var process = canvas.getContext(‘2d’);

setInterval ( “draw()”, 30 );

The aspect has now been changed from 640×480 to a 1 by 1 aspect or any other aspect ratio that I need. And is displayed in the canvas tag.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: