Page 1 of 7
Home Whiteboard Online Compilers Practice Articles AI Assistant
SQL HTML CSS Javascript Python Java C C++ PHP Scala C#
HTML Video
The HTML <video> element embeds and shows a video on the webpage. You can
embed any type of video content on the webpage by using the <video> element.
HTML <video> Element
The <video> element is used to enable video playback support within a web page. It
works very similarly to the <img> element, as it also requires adding the path or URL of
the video within the src attribute. The HTML supports only MP4, WebM, and Ogg video
formats. The <video> element also supports audio; however, the <audio> element is
more suitable for that purpose.
Embedding Videos in HTML
To embed a video inside a web page, you need to set the src attribute inside the
<video> tag that specifies the path or URL for the video. A web page serves content to a
wide variety of users with various types of browsers. Each browser supports different
video formats (MP4, WebM, and Ogg) as mentioned earlier. Therefore, we can supply all
the formats that HTML supports by including multiple <source> tags. Let the browser
decide which format is more suitable for video playback.
Syntax
Below is the syntax to embed a video on the webpage:
Open Compiler
<video width="640" height="360" controls>
<source src="video-file.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
[Link] 1/7
Page 2 of 7
Your browser does not support the video tag.
</video>
The controls Attribute
You can also enable the built-in controls for controlling audio and video playback for the
users (if needed) with the help of the controls attribute. It provides an interface that
enables users to manage video playback functions such as volume adjustment, video
navigation (forward and backward), and play or pause operations.
Example to Embed a Video
The following example shows how to insert the path or URL of a video inside the video
element:
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<p>The browser is responsible for determining the appropriate format to
use.</p>
<video width="450" height="250" controls>
<source src="/html/media/video/[Link]" type="video/webm">
<source src="/html/media/video/sampleTP.mp4" type="video/mp4">
<source src="/html/media/video/[Link]" type="video/ogg">
<p>Sorry, video element is not supported!</p>
</video>
</body>
</html>
Customizing Video Display Size
To set (adjust) the dimensions of the video display area, also known as the viewport, you
can use the height and width attributes of the <video> element. These attributes define
the height and width of the video viewport in pixels.
[Link] 2/7
Page 3 of 7
Note that the video will adjust its aspect ratio (e.g., 4:3 and 16:9) to align with the
specified height and width. Therefore, it is advisable to match the dimensions of the
viewport for a better user experience.
Example
Let's look at an example code below to understand better:
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450" height="250" controls>
<source src="/html/media/video/sampleTP.mp4" type="video/mp4">
</video>
</body>
</html>
HTML Video autoplay and loop Attributes
You can configure the video to play automatically in a loop by using the autoplay and
loop attributes.
Remember, a few browsers like Chrome 70.0 do not support the autoplay feature unless
the muted attribute is used. Therefore, it is recommended to use autoplay and muted
attributes together.
Example
The following example illustrates the autoplay and looping of video:
Open Compiler
<!DOCTYPE html>
<html>
<head>
[Link] 3/7
Page 4 of 7
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450" height="250" autoplay muted loop>
<source src="/html/media/video/sampleTP.mp4" type="video/mp4">
</video>
</body>
</html>
Setting a Video Thumbnail
You can pass a URL of an image that works as a thumbnail for the video within the
poster attribute of the <video> element. It will display the specified image until the
video starts playing.
Example
In the following example, we are illustrating the use of poster attribute:
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450" height="250" controls muted poster
="tutorials_point.jpg" >
<source src="/html/media/video/sampleTP.mp4" type="video/mp4">
</video>
</body>
</html>
Browser Support for Various Video Formats
The table below illustrates the various video formats that are supported by different
browsers:
[Link] 4/7
Page 5 of 7
Browser OGG WebM MP4
Chrome Yes Yes Yes
Edge Yes Yes Yes
Safari No Yes Yes
Firefox Yes Yes Yes
Opera Yes Yes Yes
TOP TUTORIALS
Python Tutorial
Java Tutorial
C++ Tutorial
C Programming Tutorial
C# Tutorial
PHP Tutorial
R Tutorial
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
SQL Tutorial
TRENDING TECHNOLOGIES
Cloud Computing Tutorial
Amazon Web Services Tutorial
Microsoft Azure Tutorial
Git Tutorial
Ethical Hacking Tutorial
Docker Tutorial
Kubernetes Tutorial
DSA Tutorial
Spring Boot Tutorial
SDLC Tutorial
[Link] 5/7
Page 6 of 7
Unix Tutorial
CERTIFICATIONS
Business Analytics Certification
Java & Spring Boot Advanced Certification
Data Science Advanced Certification
Cloud Computing And DevOps
Advanced Certification In Business Analytics
Artificial Intelligence And Machine Learning
DevOps Certification
Game Development Certification
Front-End Developer Certification
AWS Certification Training
Python Programming Certification
Chapters Categories
COMPILERS & EDITORS
Online Java Compiler
Online Python Compiler
Online Go Compiler
Online C Compiler
Online C++ Compiler
Online C# Compiler
Online PHP Compiler
Online MATLAB Compiler
Online Bash Terminal
Online SQL Compiler
Online Html Editor
ABOUT US | OUR TEAM | CAREERS | JOBS | CONTACT US | TERMS OF USE |
PRIVACY POLICY | REFUND POLICY | COOKIES POLICY | FAQ'S
[Link] 6/7
Page 7 of 7
Tutorials Point is a leading Ed Tech company striving to provide the best learning material on
technical and non-technical subjects.
© Copyright 2025. All Rights Reserved.
[Link] 7/7