Setting video height in HTML5

Question

This may be a simple question, but it really drives 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 the 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?

Can anybody fix the mistake I'm making.

Answer 1

You cannot change the aspect ratio in the <video> .

However, you can read your video content and write it to the <canvas> .

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 ); 

Answer 2

Here is a simple CSS trick, you do not need to add JavaScript or jQuery code. Use the object-fit CSS property for the video tag.

HTML

 <video controls="controls" 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> 

CSS

 #video{ object-fit: initial; width: 400px; height: 300px; } 

See Fiddle

Answer 3

You can use css to work.

 #video { width:1000px; height:auto; }