Skip to main content

All Methods to Play Video in HTML (With Examples)

HTML provides many ways to play video on a webpage, from simple inline videos to YouTube embeds, autoplay, fullscreen mode, and more. In this post, we will explore every commonly used technique to play videos in HTML with clean code examples.

1. Basic Video Playback

This is the simplest way to display a video on a web page.

<video src="video.mp4" controls></video>

Important: The controls attribute lets users play/pause the video.

2. Video with Width and Height

<video src="video.mp4" width="640" height="360" controls></video>

3. Using <source> Tag for Multiple Formats

This ensures the browser chooses the best supported format.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support HTML5 video.
</video>

4. Auto-Play Video

The video will start automatically when the page loads.

<video src="video.mp4" autoplay controls></video>

Note: Most browsers require muted when autoplaying.

5. Auto-Play + Muted (Best Compatibility)

<video src="video.mp4" autoplay muted controls></video>

6. Loop the Video

This will make the video restart automatically after finishing.

<video src="video.mp4" autoplay muted loop controls></video>

7. Show Thumbnail Before Playing (Using Poster)

<video src="video.mp4" controls poster="thumbnail.jpg"></video>

8. Playing a Video from a URL

You can load a video hosted on a server or CDN.

<video src="https://example.com/video.mp4" controls></video>

9. Playing a Local Video File

Just place the video file in the same folder as your HTML file:

<video src="myvideo.mp4" controls></video>

10. Add Custom Text for Unsupported Browsers

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

11. Enable Fullscreen Button

This is automatically included when you add controls. No extra code needed:

<video src="video.mp4" controls></video>

12. Disable Download Option

Use controlsList="nodownload" (works in Chrome-based browsers).

<video src="video.mp4" controls controlsList="nodownload"></video>

13. Play YouTube Video Using <iframe>

This is the most common method.

<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
Replace VIDEO_ID with the actual YouTube video code.

14. Autoplay YouTube Video

<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1"
frameborder="0"
allow="autoplay"
allowfullscreen>
</iframe>

15. Embed YouTube Playlist

<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
frameborder="0"
allow="autoplay"
allowfullscreen>
</iframe>

16. Play MP4, WebM, and OGG Together (Best Practice)

<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

17. Add Subtitles (Using <track>)

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

18. Style Video with CSS

<style>
video{
  border-radius:10px;
  width:600px;
}
</style>

<video src="video.mp4" controls></video>

Final Summary

  • <video> is the main HTML tag for playing videos
  • controls adds play/pause buttons
  • autoplay, loop, muted change playback behavior
  • <source> allows multiple formats
  • YouTube videos are embedded using <iframe>

In the next post, we will create a complete HTML video player interface with play, pause, and fullscreen styling using CSS and JavaScript.

Comments

Post a Comment

Popular posts from this blog

HTML Tables Tutorial — Learn Tables with Examples Tables organize tabular data (rows & columns). They are great for schedules, price lists, spec sheets, comparison charts, and any data that fits a grid. This guide covers: Table basics: <table> , <tr> , <td> , <th> Headers, captions, and groups ( <caption> , <thead> , <tbody> , <tfoot> ) Colspan & rowspan Styling and responsive tables Accessibility and best practices Table of Contents Basic Structure Headers & Captions Colspan & Rowspan Grouping Rows: thead / tbody / tfoot Styling Tables Responsive Tables Accessibility Tips Practical Examples Best Practices 1. Basic Structure Minimal valid table: <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> Elements: <table> — container for the table <tr> — table ...
Post a Comment
Read more
HTML Forms Tutorial HTML Forms Tutorial HTML Forms allow users to enter and submit data. They are used everywhere—login forms, signup forms, search boxes, feedback forms, etc. In this complete tutorial, you will learn all form elements with examples and demos. 1. What is an HTML Form? A form collects user input using different form elements like text fields, checkboxes, radio buttons, buttons, and more. <form> Form elements go here... </form> 2. Basic Form Structure <form action="#" method="post"> <input type="text" placeholder="Enter name"> <button>Submit</button> </form> Submit Attributes: action → URL where form data is sent method="POST" → Secure data sending method="GET" → Data shows in URL 3. Text Input Field <input type="text" placeholder="Your Name...
Post a Comment
Read more
What is HTML? A Beginner-Friendly Explanation If you want to become a web developer, HTML is the first language you should learn. It is the foundation of every website on the internet. In simple words: HTML (HyperText Markup Language) is used to create the structure and content of a webpage. Why HTML is important? Websites cannot exist without HTML It is simple and beginner-friendly Used with CSS and JavaScript Works on all browsers How does HTML work? HTML is made of tags . Tags tell the browser what type of content is being shown. Example of an HTML tag: <p>This is a paragraph.</p> Here: <p> is the opening tag </p> is the closing tag The text inside is the content Basic HTML Page Example Below is a simple webpage example you can try: <!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Hello World!</h1> <p>This is my...
Post a Comment
Read more