HTML Video

The video element is used to embed video content in web pages. It allows you to include video files directly into your HTML documents and provides several attributes to control video playback.

Video Element Attributes

The video element comes with several attributes to help you control the playback and appearance of your video content:

Attribute Description Example
src Specifies the URL of the video file.
Try yourself
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" controls></video>
        
    
controls Specifies that video controls should be displayed (such as a play/pause button).
Try yourself
        
            <video controls>
    <source src="/media/video/sample_video_720x480_2mb.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>
        
    
autoplay Specifies that the video will start playing as soon as it is ready.
Try yourself
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" autoplay></video>
        
    
loop Specifies that the video will start over again, every time it is finished.
Try yourself
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" loop controls></video>
        
    
poster Specifies an image to be shown while the video is downloading, or until the user hits the play button.
Try yourself
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" poster="/images/common/background.jpeg" controls></video>
        
    

Using the Video Element

Below are examples of how you can use the video element in your HTML documents:

Example: Basic Video
Try yourself
        
            <video controls>
    <source src="/media/video/sample_video_720x480_2mb.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>
        
    

This example shows a video element with basic controls for play, pause, and volume adjustment.


Example: Video with Poster
Try yourself
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" poster="/images/common/background.jpeg" controls></video>
        
    

This example shows a video element with a poster image that is displayed before the video starts playing.


Example: Autoplay Video
Try yourself
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" autoplay></video>
        
    

This example shows a video element that starts playing automatically when the page loads.


Important Notes

Here are some important notes and best practices for using the video element: