May be its a simple question but it's really driving me crazy. I just want to set the height and width of the HTML5 video. I am using this code: ``` ``` Result: If I add height attribute ``` ``` Result: So am I missing something here? Can anyone correct the mistake I'm doing.

Set Video height in HTML5

height, html, video, width

Solution

You can't change aspect ratio in `<video>` tag.

However you can read your video content and write it to `<canvas>` element.

For example:

<canvas id="canvas" height="768" width="1024"></canvas>

And JS:

function updateVideo( ) {
    var canvas = document.getElementById( 'canvas' );
    var ctx = canvas.getContext( '2d' );
    var myVideo = document.getElementById( 'video' );
    ctx.drawImage( myVideo, 0, 0, 640, 480 );
}
setInterval ( updateVideo, 24 );

Problem

May be its a simple question but it's really driving me crazy. I just want to set the height and width of the HTML5 video. I am using this code: ``` <video controls="controls" width="1000" id="video"> <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video> ``` Result: If I add height attribute ``` <video controls="controls" width="1000" height="300" id="video"> <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video> ``` Result: So am I missing something here? Can anyone correct the mistake I'm doing.

Original source