How To Set The Height And Width Of The Video Player In HTML5

Trang chủ » Html5 Video Stretch Css » How To Set The Height And Width Of The Video Player In HTML5

Có thể bạn quan tâm

In this article, we will learn to set the width and height of the video player in HTML5.

The following are the two scenarios

  • The width and height of the video are fixed.
  • Make the video respond to your screen width.

Approach: The HTML5 width and height attributes of the video tag are used to set the height and width of the video player respectively. The source tag is used to specify multimedia resources such as video and audio. The src attribute of the source tag specifies the path of the resource.

Syntax:

<video width=" " height=" "></video>

Example 1: The following example demonstrates the setting of width and height of the video as desired.

HTML

<!DOCTYPE html> <html> <head> <title>gfg</title> </head> <body> <!-- set width and height of the video --> <video width="800px" height="400px" controls> <source src="myvideo.mp4" type="video/mp4"> </video> </body> </html>

Output:

https://media.geeksforgeeks.org/wp-content/uploads/20210310182457/video.mp4

Example 2: The following example demonstrates the setting of width and height of the video to make your video respond to your screen width.

HTML

<!DOCTYPE html> <html> <head> <title>gfg</title> <style> video { position: relative; } </style> </head> <body> <!-- set width and height of the video --> <video width="100%" height="auto" controls> <source src="myvideo.mp4" type="video/mp4"> </video> </body> </html>

Output:

https://media.geeksforgeeks.org/wp-content/uploads/20210318163839/v.mp4

P

poojavichare1810 Follow Improve Previous Article How to specify media type of data specified in data attribute in HTML5 ? Next Article How to check whether an image is loaded or not ?

Từ khóa » Html5 Video Stretch Css