HTML5 Game - Setting the Video Size for video element

  1. HOME
  2. HTML5 Game
  3. Video
  4. Video Element

Introduction

If the width and height attributes are not set, the browser shows a small placeholder element resized to the dimensions of the video when the metadata becomes available.

If you do set the width and height attributes, the browser preserves the video's aspect ratio.

The following code shows the usage of the width and height attributes.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>Example</title>  
        <style>  
            video {  /*from  w  w w  . ja  v  a2  s .co  m*/
                background-color: lightgrey;  
                border: medium double black;  
            }  
        </style>  
    </head>  
    <body>  
        <video src="http://java2s.com/style/demo/your.webm" controls preload="auto" width="600" height="240">  
            Video cannot be displayed  
        </video>  
    </body>  
</html>

Related Topic