The simplest way to add video to a webpage

To add video to an HTML page, use the <video> tag with a source file inside it. The browser will display a player with play, pause, and volume controls automatically. You write the code directly into your HTML file — no plugins or external tools needed.

Here is the basic structure:

<video width="640" height="480" controls> <source src="myvideo.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

The width and height attributes set the player size in pixels. The controls attribute tells the browser to show the standard play button and timeline. The <source> tag points to your video file and tells the browser what format it is. The text between the opening and closing <video> tags appears only if the browser cannot play video at all — older browsers will show that message instead of a player.

Key Takeaways

  • The <video> tag embeds a player directly into your HTML without requiring plugins or external services.
  • MP4 format works in all modern browsers and is the safest choice for video files you host yourself.
  • The controls attribute gives visitors a play button, pause button, timeline, and volume slider automatically.
  • You can add multiple <source> tags with different formats so older browsers have a fallback option.
  • Autoplay and muted attributes let you start video playback without user action, though most browsers now require muted to be set first.

Setting up your video file and folder structure

Before you write the HTML, save your video file in a folder where your webpage can find it. If your HTML file is named index.html and sits in a folder called mysite, put your video file in that same folder or in a subfolder inside it.

For example, if your structure looks like this:

mysite/ index.html videos/ myvideo.mp4

Then your src attribute should point to videos/myvideo.mp4. The path is always relative to where your HTML file sits. If the video is in the same folder as the HTML file, just write the filename: src="myvideo.mp4".

Use MP4 format (.mp4 file extension) unless you have a specific reason not to. MP4 plays in Chrome, Firefox, Safari, and Edge without extra setup. If you have a video in another format like WebM or Ogg, you can convert it using free tools like HandBrake or FFmpeg, but MP4 is the standard choice for most websites.

Adding controls and autoplay options

The controls attribute is almost always what you want — it shows the play button, pause button, timeline, and volume control. Without it, visitors see only a still image and cannot play the video.

If you want the video to start playing as soon as the page loads, add the autoplay attribute. However, most browsers now block autoplay with sound, so you must also add muted:

<video width="640" height="480" controls autoplay muted> <source src="myvideo.mp4" type="video/mp4"> </video>

The muted attribute silences the audio so the browser allows autoplay. Visitors can unmute by clicking the volume icon in the player. The loop attribute makes the video restart when it reaches the end — useful for background videos or demonstrations that repeat.

Do not use autoplay on pages where visitors expect to control what they hear. Autoplay with sound is annoying and many visitors will leave the page. Use it only for silent background videos or when the video is the main focus of the page.

Using multiple video formats for older browsers

If you need to support older browsers or specific devices, add multiple <source> tags with different formats. The browser tries each one in order and plays the first format it understands:

<video width="640" height="480" controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> <source src="myvideo.ogv" type="video/ogg"> Your browser does not support the video tag. </video>

Most modern websites use only MP4 because modern browsers all support it. Adding WebM and Ogg formats is useful only if you know your visitors use older devices or if you want to reduce file size for mobile users — WebM files are often smaller than MP4 files of the same video.

The type attribute tells the browser what format each file is. Always include it so the browser does not waste time trying to read a file it cannot play. If you leave out the type attribute, the browser may read the entire file before realizing it cannot play it.

Setting a poster image and video dimensions

The poster attribute lets you choose what image appears before the visitor clicks play. Without a poster, the browser shows the first frame of the video:

<video width="640" height="480" controls poster="thumbnail.jpg"> <source src="myvideo.mp4" type="video/mp4"> </video>

Save your poster image in the same folder as your HTML file or in a subfolder, just like your video file. A good poster image is a clear, recognizable frame from the video that makes visitors want to click play. The image file should be the same width and height as your video — if your video is 640 by 480 pixels, your poster should be too.

Always set both width and height attributes. If you leave them out, the browser uses the video's actual dimensions, which may be too large or too small for your page layout. If you set only width or only height, the browser scales the other dimension to keep the video from looking stretched.

Hosting video on external services instead of your own server

If your video file is very large or you expect many visitors, hosting the video on your own server can be slow and expensive. YouTube, Vimeo, and other video platforms host the file for you and let you embed a player on your page.

To embed a YouTube video, YouTube gives you an <iframe> code that you paste directly into your HTML. You do not use the <video> tag for this — you use the code YouTube provides. The same is true for Vimeo and most other platforms.

Hosting on a platform is simpler if you do not want to manage video files yourself, but you lose control over the player appearance and you depend on that service staying online. Hosting on your own server gives you full control but requires more technical setup and costs more if you have many visitors. For most websites, YouTube or Vimeo is the easier choice.

Common mistakes and how to avoid them

The most common mistake is forgetting the controls attribute. Without it, visitors see a blank box and cannot play the video. Always include controls unless you are building a custom player with JavaScript.

The second mistake is using the wrong file path. If your HTML file cannot find the video file, the player appears but shows an error when the visitor tries to play it. Check that the path in your src attribute matches the actual location of the video file. If the video is in a subfolder, include the folder name: src="videos/myvideo.mp4".

The third mistake is using a video format the browser does not support. MP4 is safe — all modern browsers play it. If you use WebM or Ogg alone, some visitors will see an error. If you must use multiple formats, always put MP4 first so most visitors get a working video when ready.

Do not set both autoplay and controls without also setting muted. The browser will block the autoplay and the video will not start, confusing visitors who see a player that does not respond.

Frequently Asked Questions

What video formats work in all browsers?

MP4 (H.264 codec) works in all modern browsers — Chrome, Firefox, Safari, and Edge. WebM works in Chrome and Firefox but not Safari. Ogg works in Firefox and Chrome but not Safari or Edge. If you support only modern browsers, MP4 alone is enough. If you need to support older devices, add WebM and Ogg as fallbacks.

Can I make the video responsive so it scales on mobile phones?

Set the width to 100% and remove the height attribute, or use CSS to set max-width: 100%. The browser will scale the height automatically to keep the video from stretching. Wrap the video tag in a container div and use CSS padding-bottom to maintain the correct aspect ratio on all screen sizes.

How do I make a video start at a specific time?

Add a hash fragment to the src URL: src="myvideo.mp4#t=30" starts the video at 30 seconds. You can also use minutes and seconds: #t=1m30s starts at one minute and 30 seconds. Not all browsers support this, so test it in your target browsers first.

Why does my video not autoplay even though I added the autoplay attribute?

Most browsers block autoplay with sound. Add the muted attribute so the video plays silently. Visitors can unmute by clicking the volume icon. If you want sound to play automatically, you cannot — the browser will not allow it without user interaction first.

What if I want a custom play button instead of the browser's default controls?

Remove the controls attribute and use JavaScript to control the video. You can hide the default player and create your own buttons that call the video's play() and pause() methods. This requires JavaScript knowledge and is more complex than using the built-in controls.