Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set Video height in HTML5

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: enter image description here

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: enter image description here

So am I missing something here?

Can anyone correct the mistake I'm doing.

like image 834
coder Avatar asked Apr 04 '12 12:04

coder


People also ask

How do I change the width and height of a video in HTML?

The height attribute specifies the height of a video player, in pixels. Tip: Always specify both the height and width attributes for videos. If these attributes are set, the required space for the video is reserved when the page is loaded.

How do you change the height of a video player?

HTML | <video> height Attribute The HTML <video> height Attribute is used to set the height of video player in terms of pixels.

How do you change the size of a video in CSS?

This is not possible because this css will technically stretch the video which is not possible. You can change the size of video but only with aspect ratio. If you forcefully change the height it will leave blank spaces at top and bottom. is there any way to display video on full screen on mobile device?


2 Answers

Here is simple CSS trick, you don't need to add any JavaScript or jQuery code. Use object-fit CSS property on 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

like image 50
Musa Avatar answered Oct 01 '22 02:10

Musa


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 );
like image 21
antyrat Avatar answered Oct 01 '22 03:10

antyrat