How to Embed Audio and Video in HTML?

How to Add Video in HTML?

Last Updated : 13 Jan, 2025

To add a video in HTML, you use the <video> tag, which allows you to embed videos directly into your webpage for users to view without needing external players.

The <video> tag supports multiple formats like MP4, WebM, and Ogg.
You can include attributes such as controls, autoplay, and loop to enhance user experience.
Use the <source> tag within <video> to specify the video file's path and type for browser compatibility.

HTML

<html>
<body>
    <p>Watch this video to get started with Full-Stack Development:</p>
    <video controls width="600">
        <source
            src="
           https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4"
            type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

The <video> tag is used to embed the video, and the controls attribute adds play, pause, and volume options.
The <source> tag specifies the video file link and format (type="video/mp4" ensures compatibility with most browsers).

Ways to Insert Video in HTML

Lets see How to add/insert video in HTML with help of different examples.

1. Adding Video Using `<video>` Tag

The <video> tag allows you to embed videos directly into your HTML pages with control over their appearance and playback.

Use the width, height, and controls attributes to define the video dimensions and provide playback controls.
The <source> tag with the src attribute specifies the video file, and multiple formats (like MP4, WebM, Ogg) can be added for better browser compatibility.

html

<html>
<body style="text-align: center;">
    <h2>How to Add Video in HTML</h2>
    <video width="500px" height="400px" controls>
        <source src="https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4" type="video/mp4">
    </video>
</body>
</html>

width and height: Define the video size on the page.
controls: Adds playback controls (play, pause, volume, etc.).
Video Source: Specified using the <source> tag with the src attribute pointing to the video URL and type indicating the format (MP4 in this case).

2. Adding Video Using Iframe Tag

Embedding a video via an <iframe> allows seamless integration from external sources like YouTube.

Specify the video's URL within the <iframe> tag to embed the content.
Define the width and height attributes to control the display dimensions.

HTML

<html>
<body style="text-align: center">
    <h2>Using Iframe Tag</h2>
    <iframe width="400" height="200"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" 
        frameborder="0"
        allowfullscreen>
    </iframe>
</body>
</html>

<iframe> Tag: Used to embed external content, such as videos from YouTube, into your webpage.
width and height: Set the dimensions of the embedded video.

3. Adding Video Using the object element

The <object> element allows embedding various multimedia formats, including videos, into HTML documents.

Specify the video's source file using the data attribute.
Define the width and height attributes to control the video's display dimensions.

HTML

<html>
<body style="text-align: center">
    <h2>Using the object element</h2>
    <object width="500" 
            height="400" 
            data=
"https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/
Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4" 
            type="video/mp4">

    </object>
</body>
</html>

<object> Element: Used to embed multimedia content, such as videos, into a webpage.
width and height: Define the dimensions of the embedded video player.
data: Specifies the URL of the video file to be embedded.
type: Indicates the MIME type of the embedded content; in this case, video/mp4.

Best Practices for Embedding Videos in HTML

Use the <video> Tag: Utilize the <video> element for embedding videos, as it offers better control and is widely supported across modern browsers.
Provide Multiple Formats: Include multiple video formats (e.g., MP4, WebM, Ogg) within the <video> tag to ensure compatibility across different browsers.

How to Embed Audio and Video in HTML?

T

The0ne53

Improve

Article Tags :

Similar Reads

How to add video in HTML5 ?

In This article, we will define how to add video content using a <video> element in the document. Before HTML5 came into existence, videos could only be played in a browser using a plugin like flash, but after the release of HTML5, adding a video to a web page is easy as adding an image. The H

How to Add Autoplay Video in HTML?

Web design often has a feature of including a video that starts to play as soon as the web page loads. This effect can be achieved using HTML5 <video> element with the autoplay attribute. In this way, videos start playing without any user interaction hence improving the multimedia experience o

How to Center a Video in HTML ?

Centering a video in HTML enhances the user interface, offering a cleaner and more organized appearance. We can achieve this effect with two different methods, by using the Flexbox and the "style" attribute. Below are the approaches to Center a Video in HTML: Table of Content Using the FlexboxUsing

How to Autoplay Videos in HTML?

Autoplay is a feature that automatically starts a video when the page loads. While it can be convenient for certain scenarios, it's essential to use as it avoids annoying users or consuming excessive bandwidth.We will discuss different approaches to autoplay videos in HTML:Table of ContentUsing the

How to Embed Audio and Video in HTML?

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen. So, in this article, we will learn

How to add Label above Video in HTML5 ?

In HTML5, putting a label above a video is important for helping users understand and interact with the content better. There are two easy ways to do this: using the figure and figcaption elements, or just the label tag itself. By using these methods, you can easily add informative labels above your

How to Add GIF in HTML?

GIFs (Graphics Interchange Format) are the popular image format that supports both animated and static images. Adding the GIFs to the HTML document enhances the visual appeal and the user interaction of the web pages. They are commonly used for loading animations, fun illustrations, or visual explan

How to Add Map in HTML?

When building websites, including a map is often necessary to display important locations, such as office addresses, at the footer or on dedicated pages. Adding a map enhances user experience, making it easier for users to locate your business or other important points of interest.PrerequisitesBasic

How to Embed Video in Iframe in HTML?

You can use Iframe to show videos on your web page and embedding videos are very simple. To do so you can use the iframe tag directly in your HTML. Let's see how we can embed the video in the iframe.Embedding Videos in HTMLTo embed a video, use the iframe tag with the video's URL. Set the width, hei

How To Autoplay Youtube Video in HTML

To embed and play YouTube videos in HTML, you can use the <iframe> tag with the YouTube embed URL. Furthermore, to autoplay a YouTube video in HTML, you need to add some specific parameters in the URL to control autoplay and muting. Autoplay: (autoplay=1) in the URL automatically starts playin