HTML5: How to set the width of the video player?

Last update on February 14 2024 12:55:50 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to set the width of the video player</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<video width="350" height="250" controls><!-- Video element with specified width, height, and controls attributes -->
<source src="http://www.w3resource.com/html-css-exercise/basic/solution/php-demo1.mp4" type="video/mp4"><!-- Specify the source URL of the MP4 video file -->
<source src="http://www.w3resource.com/html-css-exercise/basic/solution/php-demo1.ogg" type="video/ogg"><!-- Specify the source URL of the OGG video file -->
</video><!-- End of video element -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

The HTML code defines a video element using the <video> tag.
The width attribute is set to 350 pixels, specifying the width of the video player.
The height attribute is set to 250 pixels, specifying the height of the video player.
The controls attribute is included to display video controls, allowing users to interact with the video playback.
Two <source> tags are used to specify the source URLs of the video files in MP4 and OGG formats.
This code creates a video player with the specified dimensions and source URLs, allowing users to view and control the video playback within the web page.

Live Demo:

See the Pen video-width-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page